如何实现SVG Polyline的无间断连续虚线流动动画？

核心解决思路是让虚线动画的位移量完全等于「可见线段+空白线段」的总长度，同时使用线性动画曲线，这样动画循环时视觉上完全无缝衔接，不会出现重置断点。

具体步骤与代码实现 #

1. 获取Polyline的精确长度：利用SVG元素的getTotalLength()方法拿到路径的实际总长，这是确保动画对齐的基础。
2. 配置虚线参数：定义可见线段和空白线段的长度，两者之和为虚线周期总长度。
3. 设置无缝动画：让stroke-dashoffset从0动画到-虚线周期总长（或反向），使用linear时间函数保证匀速，循环设为infinite。

// 假设你已创建并挂载了polyline元素
const polyline = document.getElementById('custom-polyline') as SVGPolylineElement;

// 1. 获取路径总长度（用于验证，动画核心是虚线周期总长）
const pathTotalLength = polyline.getTotalLength();

// 2. 定义虚线样式：可见段20px，空白段30px，周期总长50px
const dashSegment = 20;
const dashGap = 30;
const dashCycleLength = dashSegment + dashGap;

// 3. 应用基础样式
polyline.style.stroke = '#000';
polyline.style.strokeWidth = '2';
polyline.style.strokeDasharray = `${dashSegment} ${dashGap}`;
polyline.style.strokeDashoffset = '0';

// 4. 创建并应用无缝动画
const animationDuration = (dashCycleLength / 50) * 5; // 保持原5秒左右的流动速度，可调整
polyline.style.animation = `dashFlow ${animationDuration}s linear infinite`;

// 插入动画关键帧到页面样式
const styleSheet = document.createElement('style');
styleSheet.textContent = `
  @keyframes dashFlow {
    to {
      stroke-dashoffset: -${dashCycleLength};
    }
  }
`;
document.head.appendChild(styleSheet);

关键细节说明 #

• 无缝原理：当stroke-dashoffset的值等于-dashCycleLength时，虚线的位置和初始状态（offset=0）完全重合，线性动画+无限循环让过渡没有任何停顿或跳变。
• 速度调整：动画时长animationDuration可以根据需求修改——数值越小，流动速度越快。比如想让虚线每秒移动100px，dashCycleLength是50的话，设为0.5秒即可。
• 反向流动：如果需要虚线往反方向动，只需把关键帧的to值改为${dashCycleLength}即可。
• 路径适配：不管你的Polyline是直线路径还是折线，getTotalLength()都能准确计算长度，确保动画适配所有路径形状。

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