offset-path 无法在所有浏览器中实现复杂路径精准定位，仅 Chrome、Edge 和 Safari 15.4+ 支持，Firefox 标记为 “Not planned”；需用 @supports 检测并实测 getComputedStyle(el).offsetPath 返回值，Safari 对 url(#id) 静默失败，path() 语法须严格（空格、ASCII 减号、Y 轴方向等），且 transform 必须重置为 none、offset-rotate: auto 显式声明。
offset-path 无法在所有浏览器中实现“复杂路径精准定位”——它目前只在 Chrome、Edge 和 Safari 15.4+ 中可用，Firefox 明确标记为 “Not planned”，且 Safari 对 url(#myPath) 静默失败，Chrome 才真正稳定支持。
怎么确认浏览器真支持 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-rotate 与切线计算的对齐上——这三个环节任一出错，都会让元素漂移或朝向失准，而这些问题在 Firefox 中根本不会报错，只会静默失效。
