能用，但必须满足三个硬性前提：position为absolute或fixed；路径字符串单行紧凑、无多余空格、逗号分隔、大写指令；offset-distance须显式动画驱动，缺一即静默失效。
能用，但必须满足三个硬性前提：元素 position 是 absolute 或 fixed；路径字符串是单行紧凑格式（无多余空格、逗号分隔、大写指令）；offset-distance 必须被显式动画驱动。漏掉任一，动画就静默失效——控制台不报错，元素也不动。
为什么元素完全不动？先查这三件事
90% 的“不动”不是代码写错，而是基础条件没达标：
-
position不是absolute或fixed：用relative或默认static时，offset-path直接被忽略 - 元素是
display: inline（比如<span></span>默认状态）：必须显式设为block或inline-block -
offset-distance没初始值也没动画：只写offset-path，元素会卡在路径起点（0%），但不会自动开始移动
path() 字符串怎么写才不被 Safari/Chrome 静默拒绝？
路径语法看着像 SVG d 属性，实则容错极低，浏览器解析策略差异大：
- 空格不能省，逗号不能漏：
path("M100,50C150,0,250,100,300,50")在 Safari 里大概率失败；正确写法是path("M 100 50 C 150 0 250 100 300 50") - 必须用大写指令：
M、L、C、Q，混用小写m或c会导致起点偏移或整段解析失败 - 负号必须是 ASCII
-，不能是中文破折号 —— 复制设计稿坐标时尤其容易中招 - Y 轴向下为正：如果路径来自 Figma 或 Sketch（Y 向上），需手动翻转 Y 值，否则路径倒着走
拐点突变、方向错乱、动画卡顿？不是性能问题，是配置错位
这些现象几乎都源于关键参数未对齐，而非路径太复杂：
立即学习“前端免费学习笔记（深入）”；
-
transform必须重置为none：哪怕只写了transform: rotate(1deg)，也会叠加到路径运动上，轨迹偏移 -
offset-rotate: auto必须显式声明：否则元素朝向固定为 0deg（正右方），看起来像“滑”而不是“走” - 避免
ease-in-out：它会让元素在曲率变化大的地方视觉减速不均；改用cubic-bezier(0.33, 1, 0.68, 1)更平顺 - 尖锐折线（如
path("M0,0 L100,0 L100,100")）没有定义切线，offset-rotate: auto会在拐点硬切，导致瞬间翻转；解决办法是把直角换成微调的贝塞尔曲线段（C或Q）
Firefox 不支持，怎么兜底才不白忙？
Firefox（截至 128 版）仍标记为 “Not planned”，@supports (offset-path: path('')) 只能做样式开关，无法触发 JS 降级逻辑：
- JS 层必须实测：
getComputedStyle(el).offsetPath返回空字符串""才代表真不支持，不能只看 UA 或版本号 -
url(#id)在 Safari 中静默失败，调试困难；优先用path()字符串快速验证逻辑 - 若需全浏览器兼容，得 fallback 到
requestAnimationFrame+getPointAtLength()手动计算坐标，或引入 GSAP 的MotionPathPlugin
最易被忽略的一点：路径坐标系基于元素未 transform 前的布局盒，不是页面视口，也不是 SVG 的 viewBox。起始点是否在可视区、是否被 overflow: hidden 截断，得靠给父容器加 border 实测边界——别猜，要亲眼看见。
