stroke-dasharray 和 stroke-dashoffset 是唯一可行组合，因其是现代浏览器稳定支持、无需 js 驱动的描边生长方案；其他方法如 transform 或 clip-path 无法精准匹配路径走向，易致形变或锯齿。
为什么 stroke-dasharray 和 stroke-dashoffset 是唯一可行组合
SVG 路径本身没有“从起点画到终点”的原生动画能力，stroke-dasharray 和 stroke-dashoffset 是目前唯一被所有现代浏览器稳定支持、且无需 JS 驱动的描边生长方案。其他思路（比如用 transform: scale() 模拟、或靠 clip-path 推进）要么无法精准匹配路径走向，要么在曲线段出现形变或锯齿。
必须先获取真实路径长度，不能硬编码
直接写 stroke-dasharray: 100; stroke-dashoffset: 100; 看似简洁，但只要路径实际长度不是 100，动画就会提前结束、卡住或溢出。尤其当 SVG 来自设计稿导出（如 Figma/Pixso）、或含 <use></use> 引用时，getTotalLength() 可能返回 0 —— 这是常见静默失败点。
- 用
requestAnimationFrame延迟一次再读取，比等load事件更可靠 - 对多个
<path></path>，要逐个调用getTotalLength()，不能共用一个值 - 如果路径含
fill且不为none，动画初期会看到“色块突然出现”，应同步控制fill-opacity: 0并随动画渐显
CSS 动画必须显式声明 from 状态
只写 @keyframes draw { to { stroke-dashoffset: 0; } } 很容易第一帧闪一下再开始动。这是因为浏览器没被告知初始描边偏移该是多少，会按默认值渲染首帧。
- 必须用
from { stroke-dashoffset: X; }明确起始值，X 就是该路径的getTotalLength() - 路径元素需提前设好基础样式：
stroke: currentColor;、fill: none;、stroke-width: 2;，避免继承干扰 - 加
animation-fill-mode: forwards;，否则动画一结束就回退到无描边状态
内联 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>也不行，同源策略和跨域限制会让getTotalLength()失效
getTotalLength() 返回 0、fill 没设 none、CSS 动画没写 from，这三个问题占了实际调试中 80% 的“动画不动”原因。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
