路徑

path 屬性有兩種不同的含義:一種是定義文字路徑,文字字元沿該路徑渲染;另一種是定義運動路徑,參考元素沿該路徑進行動畫。

你可以將此屬性與以下 SVG 元素一起使用

示例

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    id="MyPath"
    fill="none"
    stroke="silver"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath
      path="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

animateMotion

對於 <animateMotion>path 定義了運動路徑,其格式與 d 屬性(用於 <path> 元素的幾何屬性)的解釋方式相同。運動路徑動畫的效果是根據時間計算出的 x 和 y 值,在當前使用者座標系中沿 x 和 y 軸進行平移。

<path-data>
預設值 None
可動畫的
<path-data>

此值定義了參考元素沿其進行動畫的運動路徑。有關可使用的命令的詳細資訊,請參閱 d 屬性的說明

textPath

對於 <textPath>path 定義了 <text> 元素的 字形 將被渲染到的路徑。空字串表示該元素沒有路徑資料。這意味著 <textPath> 元素中的文字不會被渲染,也不會計入 <text> 元素的邊界框。如果未指定此屬性,則改用 href 中指定的路徑。

<path-data>
預設值 href 中指定的路徑
可動畫的
<path-data>

此值定義了 <text> 元素的字形將沿其對齊的文字路徑。有關可使用的命令的詳細資訊,請參閱 d 屬性的說明

規範

規範
Scalable Vector Graphics (SVG) 2
# TextPathElementPathAttribute
SVG 動畫級別 2
# AnimateMotionElementPathAttribute