SVG textPath路径动画实现及path属性用法咨询

一、能否通过动画改变textPath的渲染路径？你的操作问题在哪？ #

目前CSS直接修改path的d属性无法联动更新textPath的布局，这不是操作有误，而是多数浏览器不支持这种方式的自动联动——textPath在初始渲染时会绑定路径的状态，CSS修改d属性后，浏览器不会重新计算文本沿路径的排列。

要实现textPath路径动画，推荐两种可行方案：

• 使用SVG原生的<animate>元素：给目标path添加动画直接修改d属性，能触发textPath的重新布局。示例代码：

<svg>
  <path id="pt" d="M0,50 L200,50 L0,150 Z">
    <animate attributeName="d" 
             values="M0,50 L200,50 L0,150 Z;M0,50 L200,150 L0,150 Z"
             dur="0.3s" begin="mouseover" fill="freeze"/>
    <animate attributeName="d" 
             values="M0,50 L200,150 L0,150 Z;M0,50 L200,50 L0,150 Z"
             dur="0.3s" begin="mouseout" fill="freeze"/>
  </path>
  <text><textPath href="#pt">INCREDIBLE TEXT</textPath></text>
</svg>

• 使用JavaScript监听事件动态修改：通过JS监听hover事件直接修改path的d属性，同样能触发textPath更新。示例代码：

<svg>
  <path id="pt" d="M0,50 L200,50 L0,150 Z" />
  <text><textPath href="#pt">INCREDIBLE TEXT</textPath></text>
  <script>
    const path = document.getElementById('pt');
    path.addEventListener('mouseover', () => {
      path.setAttribute('d', 'M0,50 L200,150 L0,150 Z');
    });
    path.addEventListener('mouseout', () => {
      path.setAttribute('d', 'M0,50 L200,50 L0,150 Z');
    });
  </script>
</svg>

二、textPath的path属性用途及生效方式 #

• 用途：path属性可以让你直接在<textPath>标签内定义文本要跟随的路径，无需单独创建<path>元素再通过href引用，适合简单路径的场景。
• 生效方式：直接给<textPath>设置path属性，值为合法的SVG路径指令字符串即可，注意该属性与href属性互斥——同时设置时，浏览器会优先使用path属性定义的路径。示例：

<svg>
  <text>
    <textPath path="M0,50 L200,50 L0,150 Z">INCREDIBLE TEXT</textPath>
  </text>
</svg>

内容的提问来源于stack exchange，提问作者Sawy