offset-path 仅 chrome 75+ 和 safari 15.4+ 支持，firefox（截至128）不支持且无计划实现；需用 js 方案降级，并注意路径语法、浏览器兼容性及 offset-rotate 行为细节。
offset-path 在 Chrome 和 Safari 里能用，Firefox 目前不支持
想用 offset-path 让元素沿 SVG 路径运动，得先确认浏览器底子——它不是全平台就位的属性。Chrome 75+、Safari 15.4+ 支持，但 Firefox（截至 128）仍标记为“Not planned”，连 offset-rotate 一起被搁置。实际项目中若需兼容 Firefox，不能只靠 CSS，得 fallback 到 transform + requestAnimationFrame 或 GSAP 这类 JS 方案。
常见错误现象：offset-path: path("M0,0 L100,100"); 写对了，但元素纹丝不动，查半天才发现是 Firefox 打开的页面；或者用了 offset-distance 动画，结果在 Safari 里跳帧，因为 Safari 对 path() 中带贝塞尔曲线的解析有轻微精度偏差。
- 使用场景：适合简单动效页、营销落地页（Chrome/Safari 用户占比高时）
-
path()内必须是标准 SVG 路径语法，path("M 10 10 C 20 20, 30 20, 40 10")可以，但path("M10,10c10,10,20,10,30,0")（省略空格）在 Safari 里可能失败 - 性能影响：路径越复杂（尤其含大量
C或S指令），GPU 渲染压力越大；建议控制路径点数在 50 个以内
offset-path 配合 offset-distance 做动画，关键在 timing-function 选法
offset-distance 本身不触发重排，但它的动画曲线直接影响运动观感。用 ease 或 linear 很容易让元素在路径拐角处“卡顿”，这不是 bug，而是插值逻辑使然：CSS 按路径总长度做线性距离映射，但路径曲率不均时，等距采样 ≠ 等速视觉效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先试
cubic-bezier(0.33, 1, 0.68, 1)（类似ease-out），它能在终点附近减速，掩盖路径曲率突变 - 避免用
steps()，offset-distance不支持逐帧步进，写了也无效 - 如果路径含尖锐折线（如
path("M0,0 L100,0 L100,100")），在折点处加offset-rotate: auto，否则元素方向不会自动对齐切线
用 getTotalLength() 和 getPointAtLength() 调试路径坐标
写完 offset-path 后发现元素起始位置偏移、或 offset-distance: 0% 没落在路径起点？大概率是路径定义本身带不可见偏移。SVG 路径的原点由 d 属性决定，但 CSS 的 path() 字符串不继承 SVG 的 viewBox 或 transform，纯按绝对坐标算。
调试方法很直接：
- 把路径字符串粘贴进一个临时 SVG：
<svg><path d="M10,20 C30,5 60,5 80,20"/></svg>
，打开 DevTools，在 Console 里执行document.querySelector("path").getTotalLength()，拿到总长（比如 78.3） - 再试
document.querySelector("path").getPointAtLength(0)，看返回的{x: ..., y: ...}是否符合预期起点 - 若起点不对，别硬调
offset-distance补偿，直接改path()字符串里的首坐标，比如把M10,20改成M0,0
offset-rotate 自动对齐失效？检查路径是否闭合或含 moveto 多次
offset-rotate: auto 本意是让元素旋转角度始终匹配路径当前切线方向，但它有个隐藏前提：路径必须是“单段连续可导”的。如果路径字符串里出现多次 M（moveto），比如 path("M0,0 L100,0 M50,-50 L50,50")，浏览器会把它当两条独立路径处理，auto 只在第一段生效，第二段起点方向丢失。
另一个坑是闭合路径 Z：虽然 path("M0,0 L100,0 L100,100 Z") 能动，但终点到起点的闭合线段切线方向可能和你预期相反，导致元素在终点突然翻转 180°。
- 解决办法：用在线工具（如 SVGOMG）把多段路径拼成一段，确保只有开头一个
M - 闭合路径慎用
offset-rotate: auto，改用固定角度或 JS 动态计算更稳 - 如果路径来自设计稿导出，注意 Sketch/Figma 导出的 SVG 常含多余
M和Z，别直接复制进path()
真正难的不是写对那行 offset-path，而是路径数据本身是否干净、浏览器是否认这个路径、以及运动过程中方向和速度怎么不露馅——这些细节藏在 SVG 规范里，不在 CSS 动画文档中。
