offset-distance 绑定 css 变量必须用 calc() 包裹，否则 chrome/safari 静默失效、firefox 忽略；应统一用无单位变量配合 calc(var(--dist) * 1%)，并做节流、边界限制与路径动画兼容性处理。
offset-distance 绑定 CSS 变量必须用 calc() 包裹
直接写 offset-distance: var(--dist) 在 Chrome 和 Safari 中会静默失效（降级为 0），Firefox 则直接忽略。CSS 规范要求 offset-distance 的值必须是带单位的长度或百分比，而 var() 单独不参与计算上下文。
✅ 正确写法是强制走计算流程：offset-distance: calc(var(--dist) * 1px) 或 offset-distance: calc(var(--dist) * 1%)，单位必须显式出现在 calc() 内部。
- 如果
--dist存的是纯数字（如35），用calc(var(--dist) * 1%)；存的是带单位值（如35px），可直接calc(var(--dist))，但更推荐统一用无单位变量 + 显式单位乘法，避免混用出错 - Safari 对嵌套
calc(calc())支持不稳定，别写成calc(calc(var(--dist)) * 1%) - 动画中若需从 0% 动到 100%，变量值应设为
0→100，配合* 1%才能自然映射
JS 更新 --dist 时要防抖 + 边界截断
在 scroll、mousemove 或 touchmove 中频繁改 --dist，容易触发样式重算风暴，尤其移动端会明显卡顿或偏移跳变。
⚠️ 必须做两件事：节流 + 值域限制。
- 用
requestAnimationFrame批量合并更新，不要在事件回调里直接style.setProperty('--dist', value) -
--dist值必须约束在合法范围：开放路径用Math.min(100, Math.max(0, value))，封闭路径可放开但建议上限设为200防止视觉溢出 - 若路径总长是动态的（比如响应式缩放），
--dist应始终按百分比逻辑存，而非像素值——否则 resize 后数值就失准
transition 驱动 offset-distance 动画极易卡顿
给 offset-distance 加 transition: offset-distance 0.3s 看似简单，实际在多数浏览器中会绕过合成器优化，强制触发布局和绘制，帧率骤降。
✅ 更稳的方案是用 @keyframes + animation-timing-function: linear。
- 定义动画时明确起止：
0% { offset-distance: calc(var(--start) * 1%); } 100% { offset-distance: calc(var(--end) * 1%); } - 避免在
@keyframes里写复杂calc()表达式，浏览器对动画关键帧内的变量计算支持仍有限 - 若需 JS 控制播放/暂停，用
element.animationPlayState = 'paused'，别反复删增 class 触发重播
offset-path 为 url(#id) 时 --dist 变量可能不生效
当 offset-path: url(#myPath) 且路径定义在 SVG 内部时，部分浏览器（尤其是 Safari）对通过 CSS 变量驱动 offset-distance 的支持不一致，常表现为变量更新后位置无反应。
✅ 推荐 fallback 方案：
- 优先改用
offset-path: path("M0,0 L100,50 Q150,100 200,50")，path() 函数对变量绑定更可靠 - 若必须用 SVG 引用，确保
<path id="myPath"></path>已渲染完成再设置变量，可用document.getElementById('myPath').getTotalLength()触发路径解析 - 加
@supports (offset-distance: 0)检测，不支持时降级为transform: translate()+ CSS 变量
路径动画里最易被忽略的不是怎么动，而是动到哪——offset-distance 的单位语义、JS 更新节奏、以及 url(#id) 路径下的变量兼容性断层，三者任一没对齐，动画就会“看起来没动”或“动得不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
