offset-path + offset-distance 可实现路径动画但兼容性差、容错低；需确保 position 为 absolute/fixed、display 非 inline、path 字符串语法严格正确；url(#id) 调试困难，path() 更易验证；注意 SVG 坐标系 Y 轴方向；transform 需重置为 none，offset-rotate: auto 必须显式声明；Firefox 不支持，需 JS 兜底。
直接用 offset-path + offset-distance 就能实现，但浏览器支持有限、路径语法容错极低，稍有偏差就静默失效——它不是“写完就能跑”的属性，而是需要逐项验证的实验性功能。
为什么元素完全不动？先查这三件事
90% 的“不动”问题出在基础前提上：
-
position必须是absolute或fixed；relative不行，static更不行 - 元素不能是
display: inline（比如默认的<span>），得显式设成block或inline-block - 路径字符串必须合法：空格不能省、逗号不能漏、负号必须是 ASCII
-（不是中文破折号），例如path("M 10 10 C 20 20 30 20 40 10")可行，path("M10,10c10,10,20,10,30,0")在 Safari 里大概率崩
用 path() 还是 url(#id)？选哪个更稳
url(#id) 看起来可复用，但实际更难调试：
- Safari 对
url(#id)静默失败（返回空字符串），只认内联 SVG 中的<path>，且id大小写必须完全一致 -
path()字符串虽硬编码，但可直接复制粘贴调试，适合快速验证逻辑 - 若路径来自设计稿（如 Figma 导出），注意 Y 轴方向：SVG 坐标系 Y 向下为正，和多数设计工具“Y 向上”相反，需手动翻转 Y 值
动画卡顿、拐点突变、方向错乱？这些是典型配置错误
不是性能问题，而是关键参数没对齐：
立即学习“前端免费学习笔记（深入）”；
-
transform必须重置为none：哪怕只写了transform: rotate(1deg)，也会叠加到路径运动上，导致轨迹偏移 -
offset-rotate: auto必须显式写出：否则元素不会自动朝向路径切线，看起来像“滑”而不是“走” - 避免
ease-in-out：它会让元素在曲率变化大的地方视觉减速不均；改用cubic-bezier(0.33, 1, 0.68, 1)更平顺 -
@keyframes必须写全from和to：只写to { offset-distance: 100%; }，Chrome 可能从初始位置直接跳过去
Firefox 不支持，怎么兜底才不白忙
Firefox（截至 128 版）仍标记为 “Not planned”，@supports 检测只是第一步：
-
@supports (offset-path: path(''))只能做样式级开关，不支持时整个@keyframes里依赖offset-distance的部分会被静默忽略 - JS 层必须实测：
getComputedStyle(el).offsetPath返回空字符串""才代表真不支持，不能只看 UA 或版本号 - 真要全浏览器兼容，得准备 JS 方案：用
SVGGeometryElement.getTotalLength()+getPointAtLength()手动计算坐标，再驱动transform: translate()
最易被忽略的一点：路径起点和元素锚点默认以盒模型中心对齐，但如果你改过 offset-anchor 或用了伪元素，起始位置可能偏移——别猜，用 DevTools 的“Layout”面板直接看 offset-path 解析后的路径框。
