offset-path与CSS变量控制路径动画是两条不同技术路径：offset-path适用于静态路径（如SVG<path>或path()函数），通过--start/--end变量控制offset-distance实现起止位置动态调节；而需实时计算路径时应改用--x/--y变量驱动transform: translate()，由JS或calc()完成坐标运算。
offset-path 和 --x/--y 变量是两条完全不同的技术路径，选错就白写。想动态换路径，不能靠 @keyframes 里硬编码坐标，得用可运行时更新的机制。
用 offset-path + offset-distance 变量控制路径起点/终点
这是目前最稳定、语义最清晰的方案，但只适用于路径已静态定义（如 SVG <path> 或内置函数 circle()/path()）的场景。
-
offset-path必须写死（比如offset-path: path("M0,0 Q100,50 200,0")），变量不能插进path()字符串里 - 真正能动的是
offset-distance：把起止位置抽成--start和--end，在@keyframes中用calc(var(--start) * 1%)和calc(var(--end) * 1%)控制播放区间 - ⚠️ 注意：
@keyframes内部不支持复杂calc()，比如calc(var(--a) + var(--b))可能被忽略；建议只做单变量乘法 - JS 更新变量后，动画会自动响应，无需重触发
animation—— 但前提是元素没被移出 DOM 或display: none
用 transform: translate() + --x/--y 实现完全动态路径
当路径需要实时计算（比如贝塞尔采样、鼠标跟随、物理模拟），必须放弃 offset-path，改用 CSS 变量驱动 translate()。
- 路径逻辑交给 JS 或
calc()：例如三次贝塞尔 x(t) 公式展开后，用--t控制时间进度，再用calc()算出--x和--y - CSS 只消费：
transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px))—— 单位必须补，否则无效 - 兼容性底线：Chrome 49+、Firefox 40+、Safari 9.1+ 支持
calc()中的变量；IE 全系不支持，别试 - 性能敏感点：频繁读写
--x/--y会触发重排，大量元素时建议用requestAnimationFrame批量更新
为什么 @keyframes 里直接写 var(--x) 会失效
这不是 bug，是 CSS 引擎的设计限制：@keyframes 是静态编译的，变量只在解析时取一次值，后续变更不会重新插值。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
0% { transform: translateX(var(--x)); }→ 动画全程用初始值 - 正确思路：把变量当作「输入参数」，动画逻辑外置（JS 驱动或
calc()表达式），CSS 只负责渲染 - 过渡方案：如果只需简单线性移动，用
transition: --x 0.3s, --y 0.3s替代动画，变量变，位置就动 - SVG 场景同理：
stroke-dashoffset: calc(var(--offset) * 1px)必须配transition: --offset，不能只写transition: stroke-dashoffset
多段路径切换的实际约束
所谓“多段不同路径”，本质是路径数据源切换，不是动画叠加 —— 浏览器不支持运行时替换 offset-path 的字符串值。
- 可行做法：准备多个带不同
offset-path的 class（如.path-arc、.path-spiral），用 JS 切换 class 触发新动画 - 不可行做法：试图用
element.style.setProperty('--path', 'path("...")')然后指望offset-path: var(--path)生效 —— 当前所有浏览器都不支持 - SVG
<use>+href切换路径 ID 是更可靠的替代方案，但需提前把所有路径定义在<defs>里 - 响应式下路径长度变化？别依赖
getTotalLength()一次性取值，resize 后必须重新获取并同步更新--len和--offset
路径动画的变量控制，核心不在“怎么写”，而在“谁来算”——JS 算好坐标喂给 CSS，还是靠 calc() 在浏览器里实时算。前者灵活但要管生命周期，后者轻量但受公式复杂度和兼容性拖累。选哪条路，取决于你的路径是否真需要动态生成。
