如何实现SVG路径描边动画与多边形沿路径同步运动

多边形动画不生效、和路径绘制不同步核心有3个问题：

• 动画参数不匹配：路径描边动画时长为4s、执行1次后停在终点，但多边形动画时长设为2.1s还加了infinite无限循环配置，二者速度、执行逻辑完全不一致
• 缺少方向适配：没有设置offset-rotate属性，多边形不会跟随路径切线方向自动旋转，视觉上和路径走向脱节
• 锚点偏移：现有polygon顶点坐标是基于SVG视口的绝对坐标，使用offset-path时默认以元素左上角对齐路径，会出现明显位置错位

核心修正点 #

1. 统一两个动画的时长、缓动函数、填充模式，保证运动节奏完全一致
2. 给多边形添加offset-rotate: auto配置，让箭头始终顺着路径延伸方向
3. 调整polygon顶点为相对坐标，让箭头尖刚好作为锚点对齐路径，避免位置偏移
4. 推荐通过JS获取路径真实长度，替换硬编码的stroke-dasharray数值，避免后续路径调整后动画失效

完整可运行代码 #

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.66 397" width="242.66" height="397">
<style>
.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
path {
  stroke: #000000;
  /* 初始占位值，JS会替换为路径真实长度 */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;
}

polygon {
  fill: #000;
  /* 路径值和描边路径完全一致 */
  offset-path: path('M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85');
  offset-distance: 0%;
  /* 箭头自动跟随路径方向旋转 */
  offset-rotate: auto;
  /* 和路径动画参数完全一致，保证同步 */
  animation: move 4s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes move {
  to {
    offset-distance: 100%;
  }
}
</style>
  <path id="arrowPath" class="cls-1" d="M240.66,2C11.72,114.98-26.67,239.75,19.39,392.85"/>
  <!-- 调整为相对坐标，箭头尖位于(0,0)锚点位置 -->
  <polygon points="-20.65 -12.26 -18.61 -15.71 -1.65 -5.63 7.16 -23.28 10.74 -21.49 0 0 -20.65 -12.26"/>
</svg>
<script>
// 获取路径真实长度，修正描边动画数值，避免硬编码误差
const path = document.getElementById('arrowPath');
const pathLength = path.getTotalLength();
path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;
</script>

效果说明 #

• 路径描边从顶部起点到底部终点匀速绘制，总耗时4s
• 多边形箭头始终贴合路径走向，和描边进度完全同步，动画结束后停在路径终点
• 如果不需要JS，也可以手动替换硬编码的长度值，当前示例路径的实际长度约为486px，直接写入CSS也可正常运行

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