最常见的原因是路径不可寻址或不可见：path必须内联于HTML中、id拼写严格一致、fill="none"、SVG不能display:none，且需配合offset-distance动画和position:absolute定位。
offset-path: url(#id) 为什么不动？
最常见的原因是路径不可寻址或不可见。浏览器解析 url(#curve) 时，只认当前 HTML 文档内联的 <path>，外部 SVG 文件、跨域引用、<defs> 外置定义都会失败。
-
<path>必须在 HTML 中内联（比如放在<svg width="0" height="0">里），不能是src="icon.svg"引入 -
id必须拼写完全一致（区分大小写），CSS 写url(#myPath)但 SVG 里是id="mypath"就静默失效 -
<path>必须设fill="none"或visibility="hidden"，否则可能遮挡元素或干扰渲染 - 容器不能用
display: none包裹 SVG —— 它会断开 CSS 对路径的引用，用width="0" height="0" style="position: absolute"才安全
offset-path: path() 的坐标和语法陷阱
直接写字符串路径看着简单，但 Firefox 和 Safari 对语法容错极低，稍有偏差就整个动画挂掉。
- 必须用绝对坐标命令：优先用
M,L,Q,C，避免m,l,t,s—— Firefox 解析相对指令不稳定 - 空格和逗号要规范：
path("M0,0 C50,-50 150,-50 200,0")可行，但path("M0,0c50,-50,150,-50,200,0")（省略空格）在 Safari 里可能崩 - Y 轴向下为正，和设计师给的“屏幕坐标”相反；若路径来自设计稿，很可能需要手动翻转 Y 值
- 闭合路径（结尾加
Z）在offset-distance超过 100% 时会循环，但 Firefox 遇到 Z 指令可能直接卡死渲染线程
offset-distance 动画必须配什么才能跑起来？
只写 offset-path 不会动，必须驱动 offset-distance，且初始化和收尾都得显式控制。
- 元素需设初始
offset-distance: 0%，否则动画从哪开始都不知道 -
@keyframes里必须明确写from { offset-distance: 0%; } to { offset-distance: 100%; }，不能只写to - 加
animation-fill-mode: forwards，否则动画结束瞬间元素跳回起点 - 元素必须是块级或行内块：
display: block或display: inline-block，原生 SVG 元素如<circle>直接套offset-path无效 - 务必重置
transform: none—— 如果元素本身有transform: rotate(15deg)，offset-distance会叠加计算，轨迹偏移严重
Firefox 不支持 offset-path，怎么兜底？
Firefox（截至 128 版）仍标记为 “Not planned”，Safari 对 url(#id) 也不支持。真要全浏览器可用，不能只靠 CSS。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (offset-path: path(""))做检测，但别指望 fallback 自动生效 —— 不支持时整个@keyframes里offset-distance部分被静默忽略 - JS 方案更稳：调用
pathEl.getTotalLength()获取长度，再用getPointAtLength()算坐标，配合requestAnimationFrame更新transform: translate(x,y) - GSAP 的
MotionPathPlugin是成熟选择，它自动降级，API 简洁：gsap.to(el, { motionPath: { path: "#curve" } }) - 描边动画（
stroke-dasharray+stroke-dashoffset）反而兼容性最好，IE11 都能跑，但得 JS 动态算长度，硬编码必崩
