offset-path 不能在 Firefox 中使用，Safari 静默忽略 url(#id) 引用，Chrome 是唯一稳定支持全功能的浏览器；必须同时设置 offset-path、offset-distance 和 transform: none 才能生效。
直接说结论：offset-path 不能在 Firefox 中使用，Safari 对 url(#id) 引用方式静默忽略，Chrome 是目前唯一稳定支持全功能的浏览器；想让元素“动起来”，必须同时配齐 offset-path、offset-distance 和 transform: none，缺一不可。
为什么写了 offset-path 元素却纹丝不动？
常见错误现象：路径字符串写对了、动画也加了，但元素完全没反应。最可能的原因是浏览器不支持或关键样式被覆盖。
-
getComputedStyle(el).offsetPath返回空字符串""（不是none），说明浏览器根本不认这个属性 —— Firefox 128 仍标记为 “Not planned”，Safari 15.4+ 仅支持path()函数，不支持url(#id) - 没设
position: absolute或position: fixed：相对定位（relative）无效，元素仍按文档流渲染，路径只是“画在空中” -
offset-distance没初始化：只写animation: move 3s infinite，但@keyframes里没明确from { offset-distance: 0%; }，动画就从“未知位置”开始 - 父级或自身有
transform：哪怕只是transform: translateZ(0)，也会干扰路径计算，必须显式写transform: none
如何让元素准确停在路径 42% 的位置？
这不是动画，而是静态定位需求。靠 left/top 无法等价替换，因为 offset-distance: 42% 是按路径总长度算的，不是屏幕像素。
- 必须设
position: absolute，否则元素不会脱离文档流去“贴”路径 - 必须写
transform: none，否则原有变换会叠加在路径位移上 - 推荐加
offset-rotate: auto，让元素方向自动对齐路径切线（尤其在贝塞尔曲线上） - 若想让左上角对齐路径起点，加
offset-anchor: 0 0；默认是中心点对齐 - 调试时可用 SVG 的
getTotalLength()查路径真实长度，再换算成 px 验证：offset-distance: calc(168px / 400px * 100%)
用 url(#id) 引用 SVG 路径时为什么失效？
看似简单，实则引用链极脆弱。Safari 和 Chrome 行为不一致，Firefox 直接跳过。
立即学习“前端免费学习笔记（深入）”；
-
<path>必须内联在当前 HTML 文档中（比如塞进<svg width="0" height="0" style="position: absolute">），不能是外部.svg文件或<img src="..."> -
id必须拼写完全一致（区分大小写），CSS 写url(#myPath)，SVG 里就得是id="myPath"，多一个空格都不行 -
<path>必须设fill="none"或visibility="hidden"，否则可能遮挡元素或触发渲染异常 - 包裹
<svg>的容器不能用display: none—— 它会断开 CSS 对路径的引用，只能用width="0" height="0"+position: absolute - Safari 15.4+ 不支持
url(#id)，只认path("...")字符串；Chrome 两者都行；Firefox 两者都不行
路径坐标和语法有哪些致命细节？
写错一个字符，整个路径就解析失败，且无报错提示，元素原地不动。
- Y 轴向下为正：设计稿给的“屏幕坐标”通常是 Y 向上，直接抄会导致路径倒着走，得手动翻转 Y 值，例如
path("M0,0 C50,-50 150,-50 200,0") - 必须用 ASCII 减号
-，不能用中文破折号－或全角符号，否则解析中断 - 空格和逗号要规范：Safari 对
path("M10,10C20,20,30,20,40,10")（省略空格）解析失败，必须写成path("M 10 10 C 20 20 30 20 40 10") - 优先用大写命令（
M,L,C），小写相对指令（m,l,c）在部分 Safari 版本中切线计算异常 - 路径末尾不要有多余换行或空格，CSS 解析器对空白敏感
真正麻烦的不是写法，而是兼容性兜底——一旦检测到 getComputedStyle(el).offsetPath === ""，就必须切换到 JS 方案（如 getPointAtLength() + requestAnimationFrame）或引入 GSAP 的 MotionPathPlugin，而不是指望 CSS fallback 自动生效。
