offset-path 仅定义动画路径而不改变元素初始位置，需配合 position: absolute 和 transform: none 才能使元素静止于路径某点；未设定位、存在 transform、路径语法错误或坐标系误解是常见失效原因。
offset-path 不能直接实现“定位”，只能驱动动画；想让元素静止在路径某点，必须靠 offset-distance 配合 position: absolute 和 transform: none 手动归零起始位移。
为什么元素写了 offset-path 却不动也不在预期位置？
因为 offset-path 本身不改变元素的初始布局位置——它只定义轨道，元素仍按常规流或定位规则渲染，再被“推”上轨道。常见原因有：
- 没设
position: absolute或position: fixed（relative不生效） - 元素自身或父级有
transform（哪怕只是translateX(1px)），必须显式写transform: none - 路径字符串用了中文标点（如中文减号
－），应严格用 ASCII- - 坐标系理解错误：
path("M0,0 L100,100")的原点是元素自身初始左上角，Y 轴向下为正，和设计稿“屏幕坐标”常相反
如何让元素“停在”路径中某个固定点（比如 37% 处）？
不用动画，纯样式控制：把 offset-distance 设为具体百分比或长度，并确保其他位移属性归零。
offset-path: path("M0,0 C50,-50 150,-50 200,0");-
offset-distance: 37%;（按路径总长度算，不是屏幕像素） - 必须加
transform: none，否则轨迹偏移 - 若需方向对齐路径切线，加
offset-rotate: auto（别混用transform: rotate()） - 默认以元素中心对齐路径起点，如需左上角对齐，加
offset-anchor: 0 0
浏览器兼容性差，动画“不动”怎么办？
offset-path 仅 Chrome 75+、Edge 79+、Safari 15.4+ 原生支持；Firefox（截至 2024 年底仍标记为 “Not planned”）完全不支持，且无 fallback 提示——它会静默忽略整个声明。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (offset-path: path(""))做特性检测，但别指望自动降级：不支持时@keyframes中依赖offset-distance的部分直接失效，元素卡在初始位置 - Safari 不支持
url(#myPath)引用 SVG，只认path()字符串；且要求大写命令（M、L、C），小写（m、l）在部分版本解析失败 - 路径末尾多空格、换行或逗号/空格混用（如
path("M10,10c10,10,20,10,30,0")）会导致 Safari 解析中断 - 真要兼容 Firefox，必须降级为
transform: translate()+requestAnimationFrame手动插值，或用 GSAP 的MotionPathPlugin
路径复杂、动画卡顿或终点停不准怎么调？
offset-distance 按路径总长度线性插值，但路径曲率不均时，“等距离” ≠ “等视觉速度”，这是数学本质，不是 bug。
- 避免用
steps()：它对offset-distance无效 - 动画时长别低于 300ms，太短易跳帧
- 路径含大量短直线拼接（如
"M0,0 L1,0 L2,0"）会累积浮点误差，导致offset-distance: 100%卡在终点前几像素 - 用 SVG 的
getTotalLength()获取真实长度，再换算百分比：offset-distance: calc(200px / 320px * 100%) - 复杂路径建议控制点数在 50 个以内，含大量
C或S指令会显著增加 GPU 渲染压力
最易被忽略的一点：所有路径坐标都是相对于元素初始位置（getBoundingClientRect() 左上角）的绝对偏移，不是视口也不是父容器。响应式场景下硬编码 M200,150 极易偏移，优先用相对贝塞尔（如 path("M0,0 C30,-20 70,-20 100,0")）或 JS 动态计算相对偏移量再拼入字符串。
