getTotalLength()返回0是最常踩的坑，因SVG路径未渲染完成时调用该方法会静默返回0，尤其在<use>引用、Figma导出或SSR场景下高发；须用requestAnimationFrame延迟读取、确保SVG内联、且为每个<path>单独计算长度。
直接用 stroke-dasharray + stroke-dashoffset 配合 JS 动态读长，是目前唯一能稳定实现「精准路径生长」的纯 CSS 方案；其他方式要么失真、要么不兼容、要么根本不可控。
为什么 getTotallength() 返回 0 是最常踩的坑
SVG 路径还没渲染完成时调用 getTotalLength()，返回值就是 0 —— 这不是 bug，是浏览器加载顺序导致的静默失败。尤其在使用 <use>、Figma 导出 SVG 或 SSR 渲染场景下极常见。
- 别等
window.onload：太晚，且无法覆盖动态插入的 SVG - 改用
requestAnimationFrame延迟一次再读取，99% 场景都能拿到真实长度 - 对每个
<path>单独调用getTotalLength()，不能复用一个值 - 若路径来自
<symbol>+<use>，需先克隆到内联 DOM 中再读取（<use>元素本身无长度）
内联 SVG 是硬性前提，<img> 和 <object> 全部失效
CSS 动画必须作用于可访问的 DOM 节点，外部 SVG 文件被隔离在独立文档上下文里，stroke-dashoffset 完全不起作用。
-
<img src="icon.svg">→ 动画彻底消失，控制台无报错 -
<object data="icon.svg"></object>→ 同源策略限制样式穿透，动画无效 - 正确做法：把 SVG 内容完整粘贴进 HTML，确保
<path>是可选中、可设样式的 DOM 元素 - 用图标库（如 Heroicons）时，优先选 React/Vue 组件版本，它们默认内联；纯 SVG 文件必须手动转内联
关键帧必须写 from，否则第一帧会闪一下
只定义 to { stroke-dashoffset: 0; }，浏览器首帧按默认 stroke-dashoffset: 0 渲染，线条瞬间全显，再从头动画 —— 看起来就是“闪一下然后重播”。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明起始状态：
from { stroke-dashoffset: var(--path-len); } -
--path-len必须由 JS 注入：pathEl.style.setProperty('--path-len', pathEl.getTotalLength()) - 动画结束加
forwards，否则回退到初始无描边状态 - 建议补一句
transition: stroke-dashoffset 0.3s ease-out，避免纯 @keyframes 在低帧率设备上卡顿
fill 和 stroke 的初始样式稍不注意就遮挡动画
如果路径自带 fill（比如导出 SVG 默认带 fill），动画开始前就会先渲染填充色块，和描边动画不同步，视觉上像“突然弹出一块色块”。
- 所有参与动画的
<path>必须设fill="none" - 描边颜色建议用
stroke: currentColor，方便主题切换 - 若需渐显填充，应配合
fill-opacity: 0→fill-opacity: 1单独动画，不能和描边共用同一 keyframe - 多个
<path>分步动画时，用animation-delay控制节奏，别靠 JS 批量触发
真正卡住的往往不是动画逻辑，而是路径没加载完就读长度、SVG 没内联、from 状态漏写这三件事——它们占了实际调试中八成以上的“不动”问题。
