startOffset

startOffset 屬性定義了將路徑轉換為<textPath> 元素的座標系後,沿路徑的初始當前文字位置相對於路徑起點的偏移量。

您可以在以下 SVG 元素中使用此屬性

示例

html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <path
    id="path1"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <path
    id="path2"
    fill="none"
    stroke="red"
    d="M130,90 Q210,90 210,45 Q210,10 170,10 Q130,10 130,40 Q130,70 165,70 Q190,70 195,50" />

  <text>
    <textPath href="#path1" startOffset="0">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

  <text>
    <textPath href="#path2" startOffset="40">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

使用說明

<length-percentage> | <number>
預設值 0
可動畫
<length-percentage>

長度表示沿路徑的距離,以<textPath> 元素的當前使用者座標系中測量的距離。

如果給出了百分比,則起始偏移量表示沿整個路徑的百分比距離。因此,0% 表示路徑的起點,100% 表示路徑的終點。

<number>

此值表示沿路徑的距離,以 <textPath> 元素的當前使用者座標系中測量的距離。

注意: 允許負值和大於路徑長度的值(例如 150%)。

規範

規範
可縮放向量圖形 (SVG) 2
# TextPathElementStartOffsetAttribute

瀏覽器相容性

BCD 表格僅在瀏覽器中載入