不规则SVG路径下实现HTML标签跟随动画的可行性咨询

完全可以实现普通HTML标签跟随不规则SVG路径同步运动的效果，这里提供两种成熟的落地方案： #

方案1：使用SVG内置的<foreignObject>标签嵌入HTML内容 #

这个是最直接的实现方式，<foreignObject>是SVG标准内置的标签，专门用于在SVG内部嵌入XML命名空间的内容，包括普通HTML元素：

• 直接把你需要自定义样式的<p>标签放在<foreignObject>节点内，支持所有普通CSS样式规则，不受SVG样式限制
• 复用你现有的进度动画坐标计算逻辑，直接更新<foreignObject>的x、y属性即可实现同步移动，不需要额外做坐标系转换，天然对齐SVG的内部坐标
• 若需要对齐路径切线方向，可额外给<foreignObject>加transform属性设置旋转角度即可

示例代码参考：

<svg width="500" height="500" viewBox="0 0 500 500">
  <path id="progress-path" d="M10,10 C100,50 200,150 300,100 L400,300" fill="none" stroke="#eee" stroke-width="2"/>
  <!-- 嵌入HTML的foreignObject -->
  <foreignObject id="text-container" x="10" y="10" width="100" height="30">
    <!-- 这里的p标签支持任意普通CSS样式 -->
    <p xmlns="http://www.w3.org/1999/xhtml" style="margin:0; font-weight: bold; color: #f00; background: #fff; padding: 2px 6px; border-radius: 4px" id="percent-text">0%</p>
  </foreignObject>
</svg>

方案2：外置绝对定位HTML元素，JS实时同步坐标 #

如果你不想把HTML内容放在SVG内部，可以用纯JS计算位置同步：

• 给需要跟随的<p>标签设置position: absolute，脱离文档流
• 你已经能拿到当前进度对应的路径长度参数，直接调用SVGPathElement.getPointAtLength(当前长度)方法，拿到该点在SVG内部坐标系的x、y值
• 调用SVG元素的getBoundingClientRect()方法拿到SVG在页面中的实际偏移量，把SVG内部坐标转换为页面绝对坐标，赋值给<p>的left、top属性即可
• 这种方案的优势是HTML元素完全独立，样式调试更灵活，兼容性比<foreignObject>更好，适合需要兼容老旧浏览器的场景

额外优化点 #

如果需要文本角度贴合不规则路径的切线方向，可以取当前进度点和稍微往前一点的进度点的坐标，计算两点连线的斜率得到旋转角度，给HTML元素加transform: rotate(角度)即可实现完美贴合路径走向的效果。

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