必须用 getTotalLength() 而不能手写固定值，因为 SVG 路径实际长度受缩放、viewBox 和单位换算影响，stroke-dasharray 与 stroke-dashoffset 以绝对像素为单位，硬编码如“248”在响应式场景下极易错位；浏览器渲染长度可能是 247.932 或 1024.5，偏差 0.1 就会导致动画起始跳变或末尾留白。
为什么必须用 getTotalLength() 而不能手写固定值
因为 SVG 路径的长度受缩放、viewBox、单位换算影响，stroke-dasharray 和 stroke-dashoffset 是绝对单位（px），写死数值如 "248" 在不同尺寸或响应式场景下会错位甚至失效。浏览器渲染时路径实际长度可能为 247.932 或 1024.5，差 0.1 都会导致动画起始“跳一下”或末尾留白。
正确做法是运行时获取真实长度，并赋给 CSS 变量：
- 确保 SVG 已插入 DOM 且有明确尺寸（
width/height或viewBox） - 在
DOMContentLoaded或window.load后执行 JS - 对每个
<path></path>调用path.getTotalLength()，存入自定义属性或 CSS 变量
例如：
const path = document.querySelector('path');<br>const len = path.getTotalLength();<br>path.style.setProperty('--len', `${len}`);
stroke-dasharray 和 stroke-dashoffset 的变量写法怎么配
CSS 中不能直接把 calc(var(--len)) 当作 stroke-dasharray 的值——它只接受数字或数字对，但可以安全用于 stroke-dashoffset 动画起点/终点。
关键配对逻辑是：
-
stroke-dasharray: var(--len);→ 等价于var(--len), var(--len)，确保只有一段实线 -
stroke-dashoffset: var(--len);→ 初始完全隐藏 - 动画终点设为
stroke-dashoffset: 0;，不依赖变量（避免 calc 计算延迟）
示例 CSS：
path {<br> stroke: currentColor;<br> fill: none;<br> stroke-width: 2;<br> stroke-dasharray: var(--len);<br> stroke-dashoffset: var(--len);<br> animation: draw 0.6s ease-out forwards;<br>}<br>@keyframes draw {<br> to { stroke-dashoffset: 0; }<br>}
用 CSS 变量触发动画时容易漏掉的初始化步骤
很多人加了 --len 却发现动画不动，问题往往出在三处：
- 没显式设置
stroke和fill：SVG 元素默认无描边，stroke: currentColor是最稳妥的继承方案 - 没写死初始
stroke-dashoffset：仅靠 CSS 变量 + 动画 from/to 不够，浏览器第一帧可能读不到变量值，导致从默认 0 开始闪动 - 没加
forwards：动画结束立即回弹到初始态，尤其在 hover 触发时特别明显
推荐内联初始态：
<path style="stroke-dasharray: var(--len); stroke-dashoffset: var(--len);" class="draw-path"></path>
再配合 JS 注入变量，比纯 CSS 更可靠。
多个路径逐个动画时如何用变量控制延迟
滚动触发动画或字母逐字出现时，需要按顺序延迟。CSS 变量支持动态计算延迟，比如：
- JS 中为每个路径设
path.style.setProperty('--delay', `${i * 0.2}s`); - CSS 中写：
animation-delay: var(--delay); - 注意：不能写成
animation-delay: calc(var(--delay) * 1);——calc()不支持时间单位相乘
更稳的做法是 JS 直接写 path.style.animationDelay = `${i * 0.2}s`;，绕过 CSS 变量解析限制。变量适合静态配置，动态时序交给 JS 更可控。
真正卡住人的不是动画逻辑，而是路径长度没取准、初始 offset 没压住、或者变量注入时机早于 DOM 渲染完成。这三处任一出错，动画就只剩“闪一下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
