必须显式声明初始 stroke-dasharray 和 stroke-dashoffset，否则浏览器首帧按默认值（stroke-dasharray: none）渲染致路径全显，再突收回起始动画；需用 getTotalLength() 获取真实长度并设为两者初始值，且 @keyframes 必须含 from。
为什么直接写 stroke-dashoffset: 0 动画会闪一下才开始动
浏览器渲染第一帧时，如果没显式声明初始 stroke-dasharray 和 stroke-dashoffset，就会用默认值（通常是 stroke-dasharray: none），导致路径瞬间全显，再突然“收回去”开始动画。这不是 CSS 写错了，而是首帧状态没对齐。
必须在元素上提前设好这两个属性：
-
stroke-dasharray值必须等于该路径真实长度（pathEl.getTotalLength()） -
stroke-dashoffset初始值也得设成同样数值，才能让线完全不可见 - 动画的
@keyframes必须带from，不能只写to
怎么获取 SVG 路径的真实长度，而不是硬编码
getTotalLength() 是唯一可靠方式。所有设计工具导出的 SVG、Figma/Pixso 复制的代码、甚至 <use> 引用的路径，在 DOM 加载后都可能返回 0 —— 这不是 bug，是路径还没完成解析或未渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别等
window.onload，改用requestAnimationFrame延迟一帧再调用：requestAnimationFrame(() => { len = path.getTotalLength(); }) - 多个
<path>要逐个调用，不能共用一个长度值 - 响应式缩放或
viewBox变化后，必须重新计算并更新style.strokeDasharray和style.strokeDashoffset - 内联 SVG 是前提；
<img src="icon.svg">或<object>下getTotalLength()一定返回0
描边动画卡住/只画一半/方向反了，常见原因有哪些
这类问题基本不出在 CSS 动画语法，而在于路径基础状态或计算偏差：
-
fill没设成none：填充色会盖住“正在画”的过程，看起来像卡住 -
stroke-dasharray小于实际长度：虚线模式循环，导致中途重复绘制、错位或戛然而止 - 路径绘制方向和
stroke-dashoffset减小方向冲突：比如d="M100,50 L0,50"是从右往左画，但offset从大到小是“从左往右推”，结果就是反向擦除。可改用负向动画：from { stroke-dashoffset: 0; } to { stroke-dashoffset: -X; } - 没加
animation-fill-mode: forwards：动画一结束就回退到初始偏移，描边瞬间消失
如何让多路径 SVG 图标分步绘制（比如流程图三步走）
靠 animation-delay 控制节奏，但关键前提是每条路径独立计算长度、独立设置样式：
- 给每个
<path>加 class（如.step-1,.step-2），JS 中分别获取长度并赋值 - CSS 中为每个 class 写不同延迟：
.step-1 { animation-delay: 0s; }，.step-2 { animation-delay: 0.3s; } - 避免用
nth-child选中路径——如果 SVG 含<g>、<defs>或注释，顺序会错乱 - 若需响应式重绘（如窗口 resize），需监听事件并批量重算所有路径长度
最易被忽略的点：内联 SVG 不只是“把代码粘进 HTML”，它要求路径在 DOM 中可访问、可计算、可样式穿透。任何封装层级（React 组件 props、Vue v-html、Webpack SVG loader 默认配置）都可能破坏这个链条。动手前先打开控制台，手动执行 document.querySelector('path').getTotalLength()，返回非零值才算真正就绪。
