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