offset-path: url(#id) 实现路径动画需内联 svg 且 id 可寻址，仅 chrome、edge、safari（≥15.4）支持，firefox 完全不支持；必须确保 内联、id 大小写严格匹配、fill="none"、 不设 display: none，并配合 offset-distance 动画与 position: absolute。
offset-path: url(#id) 必须内联 SVG 且 id 可寻址
直接用 offset-path: url(#myPath) 让图标沿 SVG 路径运动，只在 Chrome、Edge、Safari（15.4+）中生效，Firefox 完全不支持。最关键的前提是：<path></path> 必须内联在当前 HTML 文档中，不能是 <img src="icon.svg"> 或外部文件引用。
常见失效原因：
-
<svg></svg>被设了display: none—— 改用width="0" height="0" style="position: absolute"才能保活引用 -
id拼写不一致（比如 CSS 写url(#curve)，SVG 里却是id="Curve"），大小写敏感，静默失败 -
<path></path>缺少fill="none"，可能遮挡图标或干扰渲染判断 - 路径定义在
<defs></defs>外部或通过<use></use>引用，CSS 无法解析其锚点
path() 字符串语法容错极低，必须严格规范
如果不想内联 SVG，可改用 offset-path: path("...") 直接写路径字符串，但 Safari 和 Firefox 对语法极其敏感，稍有偏差就整个动画挂掉。
实操要点：
- 只用绝对命令：优先写
M,L,C,Q；避免m,c,q—— Firefox 解析相对指令不稳定 - 空格和逗号不能省：
path("M0,0 C50,-50 150,-50 300,0")可行，path("M0,0c50,-50,150,-50,300,0")在 Safari 中大概率崩溃 - Y 轴向下为正，若路径来自设计稿（通常 Y 向上为正），需手动翻转 y 值，否则运动方向反了
- 闭合路径末尾加
Z会引发 Firefox 渲染线程卡死，慎用
offset-distance 动画必须显式驱动，且依赖定位
只设 offset-path 图标不会动，必须用 @keyframes 或 transition 驱动 offset-distance 从 0% 到 100%。
关键约束条件：
- 元素必须设
position: absolute或position: fixed，relative无效 - 初始状态必须显式声明
offset-distance: 0%，否则起点可能偏移 - 动画 timing-function 影响观感：
linear在曲率突变处易“卡顿”，推荐cubic-bezier(0.33, 1, 0.68, 1) -
steps()不支持 —— 写了也无效，offset-distance不接受逐帧插值
让图标“贴着路径走”得靠 offset-rotate 和 offset-anchor
默认图标像一块砖被拖着平移，加 offset-rotate: auto 才能自动对齐路径切线方向，这是动画是否自然的关键。
进阶控制：
-
offset-rotate: auto浏览器自动计算朝向；想额外叠加固定偏角（如让箭头始终朝上），写成offset-rotate: auto 90deg - 图标不是中心对称时（比如三角形、带尾迹的箭头），默认以元素中心为锚点会“漂移”，要用
offset-anchor: 0 0（左上）或offset-anchor: 100% 50%显式指定附着点 - 旧版 Safari 对
auto支持不稳定，必要时可用 JS +getPointAtLength()补偿旋转角度
真正容易被忽略的是路径坐标系与视觉预期的错位：SVG 路径的 d 属性按绝对像素算，不继承 viewBox 缩放或 transform，也不受父容器 CSS 尺寸影响。调试时发现起点偏移，八成是路径本身定义在非 (0,0) 原点，而不是 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
