必须用 path.getTotalLength() 获取真实长度，硬编码 stroke-dasharray 会导致动画错位、跳变或不触发，因其受响应式缩放、viewBox 变更及设备渲染影响，实际长度与设计稿量取值常不一致。
必须用 path.getTotalLength() 获取真实长度，硬编码 stroke-dasharray 值会导致动画错位、跳变甚至不触发——这不是配置问题，是路径长度在响应式缩放、viewBox 变更或不同设备渲染时根本就不是你“以为”的那个数。
为什么直接写死 stroke-dasharray 会失效
常见错误是设计稿量出“大概 280px”，然后在 CSS 里写 stroke-dasharray: 280。但浏览器实际计算的路径长度依赖坐标系、stroke-width、d 属性中小数精度，getTotalLength() 返回的可能是 283.472。
- 后果：初始
stroke-dashoffset设为 280，但真实长度是 283.472 → 起始偏移不足，路径部分可见；动画终点设为 0，却多出 3.472 单位空白，收尾留白或卡顿 - 响应式场景下更明显：SVG 宽高变化、
viewBox缩放、CSStransform: scale()都会让硬编码值彻底失准 -
getBBox()或getComputedTextLength()（对<text>）不能替代getTotalLength()，它们返回的是包围盒或近似长度，不是描边路径的真实几何长度
怎么用 JS 正确获取并注入长度
必须等 SVG 渲染完成后再调用 getTotalLength()，否则返回 0。推荐监听 DOMContentLoaded 或使用 svg.onload（若 SVG 是外部文件）。
- 选中路径：
const path = document.querySelector('#myPath') - 获取长度：
const len = path.getTotalLength() - 注入方式二选一：
– 写入 CSS 自定义属性：document.documentElement.style.setProperty('--path-len', len)，再在 CSS 中用stroke-dasharray: var(--path-len)
– 或直接设内联样式：path.style.strokeDasharray = len; path.style.strokeDashoffset = len - 注意：内联样式写法需配合
!important或确保无更高优先级 CSS 覆盖，否则会被外部规则干掉
CSS 动画中 stroke-dashoffset 的起止值怎么配才不跳变
跳变的本质是动画第一帧状态与 DOM 初始样式不一致。CSS 动画不会自动读取你 JS 设置的内联 style，除非你在 CSS 规则里显式声明初始值。
立即学习“前端免费学习笔记（深入）”；
- 必须在 CSS 中写明初始态：
svg path { stroke-dasharray: var(--path-len); stroke-dashoffset: var(--path-len); } - @keyframes 只管变化过程：
@keyframes draw { to { stroke-dashoffset: 0; } } - 绑定动画时加
forwards：animation: draw 2s ease-in-out forwards，否则动画结束瞬间stroke-dashoffset会回弹到未声明的默认值（通常是 0），导致“闪一下”或终态丢失 - 如果用
transition替代@keyframes，触发方式是加 class：path.classList.add('drawn')，对应 CSS 中定义.drawn { stroke-dashoffset: 0; }—— 同样不能漏掉初始stroke-dashoffset声明
容易被忽略的渲染前提条件
再准的长度、再顺的动画，缺了这三条，路径照样不动或被盖住。
- 路径必须有
stroke值（哪怕只是stroke: transparent），否则描边不存在，stroke-dasharray无效 - 必须设
fill="none"（不是fill: transparent），否则填充色会完全遮盖描边动画 -
stroke-width不能为 0 或未声明，IE11 等老浏览器对隐式宽度处理更严格，建议显式写如stroke-width="2"
最常卡住的地方不是代码写错，而是 JS 拿长度的时机太早、CSS 没声明初始 stroke-dashoffset、或者忘了 fill="none" —— 这三个点检查完，90% 的“动画不动”“开头就显示”“结尾留白”问题都解决了。
