SVG路径动画可靠方案是stroke-dasharray与stroke-dashoffset组合，需先用getTotalLength()获取真实长度并设为相等初始值，再通过CSS动画将offset从长度值减至0实现绘制效果。
SVG 路径动画不是靠 d 属性直接过渡实现的，硬写 transition: d 0.3s 在多数场景下会失效或跳变——真正可靠的是 stroke-dasharray + stroke-dashoffset 的组合，配合动态长度计算。
为什么不能直接对 d 做 CSS transition
浏览器对 d 的插值要求极其严格：起始和结束路径的命令数量、类型、参数顺序必须完全一致。哪怕一个用 M 10 10 L 50 50，另一个写成 M10,10L50,50（少了空格），某些浏览器就可能拒绝插值；更常见的是设计师导出的图标路径结构不统一，导致动画卡在起点或突变到终点。
- 只在两个路径已人工校验过指令对齐时才考虑 CSS
transition: d - 闭合路径必须都带
Z或都不带，混用必出问题 - 含弧线（
A）的路径，large-arc和sweep参数也需一一对应，否则插值方向错误
getTotalLength() 必须在渲染后调用
SVG 元素未挂载或未完成布局时，pathEl.getTotalLength() 返回 0。常见错误是脚本放在 里，或没等 <svg></svg> 完全解析就执行。
- 推荐用
document.addEventListener("DOMContentLoaded", ...)包裹 - 若 SVG 是异步插入（如 AJAX 加载），需监听
svg.onload或用MutationObserver - 响应式页面中，窗口缩放后路径长度可能变化，需监听
resize并重算（但别频繁触发，加防抖） - 不要用
getBBox().width或估算值代替getTotalLength()，曲线路径误差极大
CSS 动画中 stroke-dasharray 和 stroke-dashoffset 怎么配
核心逻辑是：把整条描边“伪装”成一条实线段，再用偏移让它从不可见到完整显现。这要求两个值初始相等，且等于路径真实长度。
立即学习“前端免费学习笔记（深入）”；
- 先在 JS 中获取长度：
const len = pathEl.getTotalLength(); - 设为内联样式：
pathEl.style.strokeDasharray = len;，pathEl.style.strokeDashoffset = len; - CSS 中定义动画：
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } - 必须确保
fill="none"，否则填充色会盖住描边动画 - 若用 CSS 自定义属性传长度，记得在
<path></path>上写style="--len: 246.7;"（保留小数，避免四舍五入误差）
多路径分步动画与渐变描边怎么协同
多个 <path></path> 可独立控制，但要注意它们共享同一套描边规则，渐变色需额外声明 <lineargradient></lineargradient> 并通过 stroke: url(#grad) 引用。
- 用
animation-delay错开各路径的动画起始时间，例如path:nth-child(1) { animation-delay: 0s; }，path:nth-child(2) { animation-delay: 0.3s; } - 渐变色本身不会随路径绘制进度变化，但视觉上会同步“出现”，因为描边是从头开始显露的
- 若某路径有
stroke-width变化，需显式加入transition：例如transition: stroke-dashoffset 0.6s, stroke-width 0.6s - IE 不支持
stroke-dasharray的 CSS 动画，降级方案只能用 JS 驱动requestAnimationFrame更新stroke-dashoffset
最易被忽略的一点：所有动画前提都是路径已渲染且有有效描边。检查 DevTools 中该 <path></path> 是否真的显示了 stroke，有没有被父容器 overflow: hidden 截断，或者 viewBox 设置导致路径落在可视区外——这些都会让动画“看起来没动”。
