offset-path 目前仅 chrome/edge/safari（15.4+）支持，firefox 标记为 “not planned”；需用 @supports (offset-path: path('')) 和 getcomputedstyle(el).offsetpath 实测兼容性，且路径语法、transform 重置、offset-rotate 配置等细节极易出错导致静默失效。
不能直接用 offset-path 实现“任意路径”在所有浏览器上稳定运行——它目前只适合 Chrome / Edge / Safari（15.4+）的实验性场景，Firefox 仍标记为 “Not planned”。
怎么确认浏览器真支持 offset-path？
别只看版本号，必须实测：
-
@supports (offset-path: path(''))可做样式级检测，但 fallback 不会自动触发：不支持时整个@keyframes中依赖offset-distance的部分会被静默忽略，元素卡在初始位置 - JS 中用
getComputedStyle(el).offsetPath检查返回值——不支持时是空字符串""，不是none - Safari 支持
path()，但对url(#myPath)静默失败；Chrome 支持两者；Firefox 返回空字符串且无任何降级提示
path() 字符串写错的三个高频坑
看似简单的路径定义，常因语法细节导致元素不动、偏移或方向错乱：
- 坐标单位和方向反了：
path('M 0 0 L 100 100')中 Y 轴向下为正，和多数设计稿“屏幕坐标”（Y 向上）相反，结果路径倒着走 - 空格和逗号混用：Safari 对
path("M10,10c10,10,20,10,30,0")（省略空格）解析失败，必须写成path("M 10 10 C 20 20 30 20 40 10") - 用了中文标点：路径里的负号必须是 ASCII 减号
-，不是中文破折号－，否则整个path()解析失败
为什么 offset-distance 动画总“卡”在拐点？
这不是 bug，而是 CSS 插值机制与路径几何不匹配的必然结果：
-
offset-distance按路径总长度做线性映射，但贝塞尔曲线或折线段曲率不均时，“等距离” ≠ “等视觉速度” - 避免用
ease-in-out，改用cubic-bezier(0.33, 1, 0.68, 1)（类似ease-out），能在终点减速，掩盖拐点突变 - 绝对不要用
steps()——offset-distance不支持逐帧步进，写了也无效 - 路径含尖锐折线（如
path("M0,0 L100,0 L100,100")）时，必须加offset-rotate: auto，否则元素方向不会对齐切线
transform: none 是硬性前提，不是可选项
只要元素自身有 transform（哪怕只是 translateX(1px)），offset-distance 就会叠加在其变换结果上，轨迹彻底偏移：
- 必须显式重置：
transform: none，不能靠继承或初始值 -
offset-rotate: auto和transform: rotate()不能共存，后者会干扰切线计算，造成朝向错乱 - 路径坐标系基于元素未 transform 前的布局盒，不是页面视口，也不是父容器
真正复杂路径或跨浏览器需求下，offset-path 的容错率极低——一个空格、一个负号、一个大小写命令，都可能让整个动画静默失效。它不是“写完就能跑”的属性，而是需要逐浏览器验证、逐路径调试的实验性能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
