path

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 定義運動路徑，以與 <path> 元素的 d 幾何屬性相同的格式表達，並以相同的方式解釋。運動路徑動畫的效果是沿著當前使用者座標系的 x 軸和 y 軸進行平移，平移量由隨時間計算的 x 和 y 值確定。

值 <path-data>
預設值 無
可動畫 否
<path-data>

此值定義引用元素動畫的運動路徑。有關可以使用哪些命令的詳細資訊，請參閱 對 d 屬性的解釋。

textPath

對於 <textPath>，path 定義將渲染 字形 的路徑，這些字形屬於 <text> 元素。空字串表示元素沒有路徑資料。這意味著 <textPath> 元素中的文字不會渲染或對 <text> 元素的邊界框做出貢獻。如果未指定該屬性，則改為使用 href 中指定的路徑。

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

此值定義 <text> 元素的字形對齊的文字路徑。有關可以使用哪些命令的詳細資訊，請參閱 對 d 屬性的解釋。

規範

規範
可縮放向量圖形 (SVG) 2
# TextPathElementPathAttribute
SVG 動畫級別 2
# AnimateMotionElementPathAttribute