SVG路径虚线动画本质是通过JS获取路径总长度并动态控制stroke-dasharray与stroke-dashoffset实现；必须用getTotalLength()计算真实长度，配合CSS变量同步至样式，否则动画错位或失效。
SVG <path> 的虚线动画本质是控制 stroke-dasharray 和 stroke-dashoffset
CSS 无法直接给任意 CSS 路径（比如 clip-path 或 transform 生成的形状）加流动虚线——它只对 SVG 的 <path>、<line>、<polyline> 等描边元素生效。所谓“流动”，其实是用 @keyframes 动态改变 stroke-dashoffset，配合预先算好的 stroke-dasharray 值实现视觉位移。
关键点在于：必须先获取路径总长度，否则动画会卡顿、错位或不动。浏览器不自动暴露 <path> 长度，得靠 JS 调用 getTotalLength()。
- 别在 CSS 里硬写一个猜测的
stroke-dasharray: 10,5就开始动画——复杂路径长度可能几百甚至上千，固定值会导致虚线断续或跑偏 - 如果路径是动态生成（比如 D3 绘图、地图轨迹），每次更新后必须重新调用
getTotalLength()并重设 CSS 变量或内联样式 - 用
stroke-linecap: round可让虚线端点更柔和，但会略微影响长度计算精度（一般可忽略）
用 CSS 变量 + getTotalLength() 同步路径长度
把 JS 算出的长度传给 CSS，才能让动画真正贴合路径。推荐用 CSS 自定义属性传递，比内联 style 更易维护。
const path = document.querySelector('path');
const len = path.getTotalLength();
path.style.setProperty('--path-length', `${len}`);
然后在 CSS 中引用：
立即学习“前端免费学习笔记（深入）”；
path {
stroke-dasharray: var(--path-length);
stroke-dashoffset: var(--path-length);
animation: dash-flow 3s linear infinite;
}
@keyframes dash-flow {
to { stroke-dashoffset: 0; }
}
-
stroke-dasharray设为单值（如1234）等价于1234,1234，即实线段和空白段等长，这是最常用且易控的模式 -
stroke-dashoffset初始值设为全长，动画终点归零，就形成“从头流到尾”的效果；反过来设为负值可反向流动 - 若路径含
fill，记得加fill: none，否则描边动画会被填充遮盖
复杂路径（贝塞尔曲线、多段拼接）的常见翻车点
路径越复杂，越容易在以下环节出问题：
- 路径字符串含多余空格或换行：某些 SVG 生成工具（如 Figma 导出、AI 转 SVG）会在
d属性里塞换行符，导致getTotalLength()返回0或报错 —— 用path.getAttribute('d').replace(/\s+/g, ' ').trim()清理后再挂载 - 路径用了
transform缩放/旋转：getTotalLength()返回的是原始坐标系下的长度，不会响应 transform。需要手动按缩放比例折算，或改用getBBox()+ 近似估算（不推荐） - 路径含
textPath或<use>引用：这些不是真实<path>元素，getTotalLength()无效 —— 必须找到被引用的源<path>或用<path>重绘
性能与兼容性底线
动画本身开销不大，但频繁重算长度或操作大量路径会卡顿。IE 完全不支持 stroke-dasharray 动画，Edge 17+ 才稳定支持。
- 超过 50 条路径同时动画？别用 CSS 动画，改用
requestAnimationFrame+ Canvas 批量绘制，可控性更高 - 移动端 Safari 对超长路径（>5000 单位）的
getTotalLength()有性能抖动，建议路径分段或简化控制点 - 想兼容 IE？只能降级为静态虚线，或用
filter: url(#animated-dash)配合 SVG<filter>（极复杂，一般不值得）
最麻烦的永远不是怎么写动画，而是确保每条路径在任意缩放、重绘、异步加载后，它的长度值依然准确、及时、可读取。这点没盯住，后面所有动画都是幻觉。
