<p>CSS变量不能用于@keyframes内animation-duration，因其静态编译；须在元素animation属性中用calc(var(--speed) * 1s)绑定，且需同步更新路径长度与偏移值。</p>
为什么直接用animation-duration: var(--speed)会失效
这不是浏览器 bug，而是 CSS 动画引擎的解析机制决定的：@keyframes 是静态编译的，所有值在首次解析时就固化了。哪怕你后续用 JS 改了 --speed，动画本身不会重编译、也不会重新插值。
常见错误写法：@keyframes draw { 0% { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; animation-duration: var(--speed); } }——animation-duration 写在 @keyframes 里完全被忽略，它只在元素的 animation 属性上生效。
真正能响应变量变化的，只有那些支持 CSS 变量的**属性本身**（如 stroke-dashoffset、transform），而不是动画控制参数。
用animation属性绑定变量才是正解
速度控制必须落在元素自身的 animation 声明上，且要确保该属性支持变量（现代浏览器中 animation-duration、animation-timing-function 都支持）。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
animation: draw calc(var(--speed) * 1s) ease-in-out forwards; -
--speed必须是纯数字（比如2），单位由calc()补上；写成2s就会解析失败 - 如果想同时控制多个路径用不同速度，每个
<path>单独设style="--speed: 1.5;"，CSS 里用属性选择器或 :nth-child 区分 - 注意 Safari 15.4 之前不支持
animation-duration变量，需加回退：animation-duration: 2s; animation-duration: calc(var(--speed) * 1s);
更灵活的方案：用transition替代animation
当速度需要频繁切换（比如用户拖拽调节进度条），transition 比重启 animation 更轻量、更可控。
- 给
<path>加：transition: stroke-dashoffset calc(var(--speed) * 1s) ease-in-out; - JS 控制变量变化即可触发动画：
path.style.setProperty('--speed', '0.8'); - 此时
stroke-dashoffset的起止值必须通过 JS 或 CSS 设置好（比如从120→0），transition 只管“怎么变” - 比
animation少一层调度开销，尤其适合大量路径或高频更新场景
响应式缩放下速度“变慢”的真实原因
不是变量没生效，而是路径长度变了——getTotalLength() 返回值随 viewBox 缩放或 CSS transform: scale() 动态变化，但你的 stroke-dasharray 和 stroke-dashoffset 还是旧值，导致动画帧数不变、实际移动距离变短，视觉上就“慢了”。
- 监听
resize或SVGElement的viewBox变化，重新调用getTotalLength() - 把新长度写回 CSS 变量：
svgEl.style.setProperty('--length', len); - CSS 中用：
stroke-dasharray: var(--length); stroke-dashoffset: var(--length); - 别忘了同步更新
--speed，否则新长度配老时间，节奏还是错的
最常被忽略的是：变量改了，但路径长度没重算；长度重算了，但 stroke-dashoffset 初始值没同步更新。这两步断掉任意一个，动画看起来就是“卡”“跳”“慢半拍”。
