必须用 getTotalLength() 获取真实路径长度，否则动画错位、跳变或不触发；硬编码 stroke-dasharray 会因响应式缩放、viewBox 变化等失准；JS 获取后应注入 CSS 变量或内联 style，并在 CSS 中显式声明初始 stroke-dashoffset，配合 forwards 保证终态留存。
必须先用 getTotalLength() 获取真实路径长度，否则动画会错位、跳变或不触发。
为什么直接写死 stroke-dasharray 值会失效
硬编码长度（比如 stroke-dasharray: 300）在响应式缩放、SVG viewBox 变化、或不同设备渲染时立刻失准。浏览器计算的路径长度是动态的，依赖坐标系、stroke-width、甚至 path 数据中的小数精度。
- 常见错误：用设计稿量出的“大概 280px”直接写进 CSS —— 实际
getTotalLength()返回可能是283.47 - 后果：动画起始不可见但结束留白、中间卡顿、或根本不动（因为初始
stroke-dashoffset≠stroke-dasharray） - 正确做法：用 JS 获取后注入 CSS 自定义属性，或直接设为内联 style
CSS 动画中 stroke-dashoffset 的起止值怎么配才不跳变
跳变的本质是动画第一帧状态与 DOM 初始样式不一致。CSS 动画不会自动读取你 JS 设置的内联 style，除非你显式声明。
- 必须在 CSS 中显式写初始态：
stroke-dashoffset: var(--path-len);或stroke-dashoffset: 283.47; - @keyframes 里只写终点：
to { stroke-dashoffset: 0; }，不能只靠0%帧去覆盖 - 加
forwards：animation: draw 1.2s ease-in-out forwards;，否则动画一结束就回弹 - 避免用
transition+ class 切换时漏掉初始stroke-dashoffset声明 —— 这是最多人踩的坑
JS 初始化时 stroke-dasharray 写成 "L L" 还是 "L"
两种都行，但语义和容错性不同。stroke-dasharray: "283.47" 等价于 "283.47 283.47"，即实线段长 = 间隙长 = 全长，视觉上就是一条完整实线被整体偏移。
立即学习“前端免费学习笔记（深入）”；
- 推荐写成
"L L"（如path.style.strokeDasharray = `${len} ${len}`）：更清晰表达“一段实线 + 一段等长空白”，便于调试和后续扩展（比如想加虚线尾部） - 如果只写
"L"，某些旧版 Safari 对单值解析有兼容问题 - 注意 JS 属性名是
strokeDasharray（驼峰），不是stroke-dasharray
动画没动？先检查这三件事
90% 的“不动”问题出在这三个地方，按顺序快速验证：
-
path元素有没有stroke？没有描边，dash 属性完全无效；同时确认fill="none"，否则会遮住描边效果 - 是否在 SVG 渲染完成后再调用
getTotalLength()？放在DOMContentLoaded或svg.onload里，别在document.write后立刻执行 - CSS 动画是否被其他规则覆盖？用 DevTools 检查 computed 样式里
stroke-dashoffset的实际值是否随动画变化 —— 不变说明动画根本没跑
最易被忽略的一点：路径数据（d 属性）里如果有 z（闭合路径）或大量贝塞尔控制点，getTotalLength() 计算成本略高，但现代浏览器基本无感；真正影响体验的是没等 SVG layout 完成就取长度 —— 此时返回 0，整个动画就废了。
