必须用path.gettotallength()获取真实路径长度并动态注入stroke-dasharray和stroke-dashoffset初始值，硬编码会导致动画错位、跳变或不触发；内联svg是前提，需显式声明stroke、fill:none等基础样式，并加forwards保持终态。
直接用 stroke-dasharray 和 stroke-dashoffset 配合 CSS 动画，是目前唯一无需 JS、全现代浏览器稳定支持的 SVG 路径描边生长方案。其他方式（如 transform 或 clip-path）要么路径走向不匹配，要么曲线段出锯齿。
为什么动画不动或闪一下？
核心问题不在写法，而在初始状态没对齐渲染管线。典型现象和修复点：
- 第一帧闪一下再动 → 没在
<path></path>上预设style="stroke-dasharray: X; stroke-dashoffset: X;"，浏览器按默认值渲染首帧 -
getTotalLength()返回 0 → SVG 尚未加载完成，或路径来自<use></use>引用；改用requestAnimationFrame延迟一次读取比等load更可靠 - 动画卡半截或溢出 →
stroke-dasharray值小于实际路径长度；必须用path.getTotalLength()获取真实值，不能硬编码 - 图标里有
fill且不是none→ 动画初期会看到色块突兀出现；同步加fill: none或控制fill-opacity: 0
内联 SVG 是硬性前提
用 <img src="icon.svg"> 或 CSS background-image 加载 SVG，stroke-dashoffset 动画完全无效——外部文件的 DOM 和样式不可访问，CSS 无法穿透作用域。
- 必须把 SVG 代码直接写进 HTML（即内联），哪怕只是复制粘贴一段
<svg><path d=""></path></svg> - 若用图标库（如 Heroicons），优先选提供 React/Vue 组件的版本，它们默认内联；若只有 SVG 文件，需手动转成内联代码
-
<object></object>或<iframe></iframe>同样不行，同源策略和跨域限制会让样式失效
如何正确设置 stroke-dasharray 和 stroke-dashoffset？
关键不是“怎么写动画”，而是“怎么初始化”。路径长度必须运行时获取，且要配对使用：
-
stroke-dasharray设为路径总长（如120），等价于120, 120—— 确保只有一段实线，空白段 ≥ 总长即可 -
stroke-dashoffset初始也设为该长度（如120），让实线段完全偏移出视区，路径不可见 - CSS 动画只需驱动
stroke-dashoffset从总长减到0；别试图同时动stroke-dasharray - 必须显式声明基础样式：
stroke: currentColor、fill: none、stroke-width: 2，避免继承干扰
动画结束后描边消失？
因为动画没保持终态。CSS 动画默认只影响播放期间，结束即回退。
- 加
animation-fill-mode: forwards，确保动画结束后保留stroke-dashoffset: 0 - 如果用
transition替代@keyframes，记得触发类名切换后，目标状态也要带完整样式（包括stroke和fill） - 最易被忽略的是：路径元素上没提前设
stroke，动画一结束就回到无描边状态 —— 所以基础描边样式必须写死在元素或 CSS 规则里
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
