路徑
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 |