必须用js调用gettotallength()获取真实路径长度并注入css变量，否则硬编码值会导致动画错位、跳变或失效；因各路径长度不同、ssr/场景下初始返回0、viewbox缩放不影响长度计算但影响视觉，且css无法运行时读取几何值。
不能靠 CSS 变量直接替代 getTotalLength() 计算路径真实长度，必须用 JS 读取后注入变量；否则动画会错位、跳变或不触发。
为什么--path-len不能写死或用估算值
硬编码的 stroke-dasharray 和 stroke-dashoffset 值（比如 120）只对特定路径有效。同一 SVG 中多个 <path></path> 长度不同，用同一个变量会导致部分路径动画卡半截、溢出或完全不动。更隐蔽的问题是：Figma 导出、SSR 渲染、<use></use> 引用等场景下，getTotalLength() 初始返回 0，此时若 JS 提前把 --path-len: 0 注入样式，CSS 动画就彻底失效——且控制台无报错。
- 路径长度是渲染后计算的几何值，不是字符串长度或
getBBox()返回的包围盒尺寸 -
viewBox缩放、transform、stroke-width都不影响getTotalLength()结果，但会影响视觉表现 - 用
calc(100% + 1px)或媒体查询响应式赋值毫无意义——长度单位是用户坐标，和 CSS 像素无关
如何用 JS 正确注入 --path-len 并绑定到每个 <path></path>
关键不是“设变量”，而是“何时设、给谁设、怎么设”。必须为每个 <path></path> 单独调用 getTotalLength()，并确保 DOM 已就绪、SVG 已渲染。
- 不用
window.onload：太晚，且无法覆盖动态插入的 SVG - 改用
requestAnimationFrame延迟一次读取，99% 场景能拿到真实长度 - 若路径来自
<symbol>+<use></use></symbol>，需先克隆到内联 DOM：useEl.getSVGDocument()?.getElementById('id')?.cloneNode(true)，再挂到容器里读取 - 注入方式统一用
pathEl.style.setProperty('--path-len', pathEl.getTotalLength())，避免污染全局:root
CSS 中怎么安全引用 --path-len 并驱动动画
变量只是桥梁，真正起效的是它在 stroke-dasharray 和 stroke-dashoffset 中的使用方式。必须显式声明初始状态，否则首帧仍会闪一下。
-
stroke-dasharray: var(--path-len);等价于var(--path-len), var(--path-len)，确保只有一段实线 -
stroke-dashoffset: var(--path-len);必须和dasharray值一致，才能实现初始完全隐藏 - @keyframes 必须带
from：只写to { stroke-dashoffset: 0; }会导致浏览器按默认0渲染首帧，线条瞬间全显 - 加
animation-fill-mode: forwards，否则动画结束立即回退到无描边状态
容易被忽略的兼容与性能细节
看似只是变量替换，实际涉及渲染管线时机、CSS 层叠优先级、以及多路径协同问题。
- Firefox 对
var(--x)在stroke-dasharray中的支持比 Chrome 晚一版，建议加降级：stroke-dasharray: 120; stroke-dasharray: var(--path-len); - 大量路径（>20 条）同时动画时，反复调用
getTotalLength()会触发重排，应缓存结果并复用 - 如果路径含
fill且未设fill: none，动画初期会看到色块突兀出现——这不是变量问题，是样式遗漏 -
<img src="icon.svg">或<object></object>加载的 SVG，--path-len注入成功也无效：外部文档 DOM 不可访问，样式无法穿透
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
