animatemotion 是 svg 路径动画机制但已半废弃，chrome/edge 可用需满足嵌套、path 属性为字符串、无定位冲突三条件；firefox 已移除，safari 未完整支持；推荐用 css offset-path 替代，兼容性更好。
animateMotion 是 SVG 原生支持的路径动画核心机制，但它在现代浏览器中已处于半废弃状态：Chrome 和 Edge 仍可用，Firefox 自 2023 年起已移除支持，Safari 从未完整实现。如果你直接写 animateMotion 发现动画不跑、控制台无报错但元素静止——大概率是浏览器兼容性问题，不是代码写错了。
animateMotion 在 Chrome 中能用，但必须满足三个硬条件
-
animateMotion必须嵌套在要动的元素内部（如<circle></circle>或<text></text>），不能放在外部<defs></defs>或独立节点里 - 路径必须用
path元素定义，且animateMotion的path属性值需为完整路径数据字符串（如d="M10,80 Q95,10 180,80"），不能引用id - 元素本身不能有冲突的定位属性（如同时设了
x/y和animateMotion），否则 Chrome 会静默忽略动画
<svg width="400" height="200"><circle cx="0" cy="0" r="6" fill="#3498db"><animatemotion path="M10,80 Q95,10 180,80 T350,80" dur="3s" repeatcount="indefinite" rotate="auto"></animatemotion></circle></svg>
注意：上面的 rotate="auto" 是让圆始终朝向运动切线方向；若去掉，它就不会自转。
Firefox 不支持 animateMotion？用 CSS offset-path 替代更可靠
offset-path 是 CSS 动画方案，目前 Chrome、Edge、Safari（≥15.4）、Firefox（≥111）均已支持，是当前唯一跨浏览器可行的路径动画主线方案。
- 它要求目标元素是块级或行内块（
display: block或inline-block），且不能是原生 SVG 形状（如<circle></circle>），得用<div> 或 <code><span></span>包裹 SVG 内容 - 路径必须是
path()函数语法，且单位统一为逻辑像素（不能混用em或%） - 动画靠
offset-distance驱动，需搭配@keyframes
<div class="mover"><svg viewbox="0 0 20 20"><circle r="4" fill="#e74c3c"></circle></svg></div>
<p><style>
.mover {
offset-path: path('M10,80 Q95,10 180,80 T350,80');
animation: move 3s linear infinite;
}
@keyframes move {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
</style></p>
⚠️ 坑点：Firefox 对 path() 中的相对指令（如 t, s, q）支持不稳定，建议全用绝对指令（M, Q, L）并校验路径是否闭合/越界。
文字沿路径动？别碰 textPath + animateMotion 组合
这个组合在所有浏览器里都极难稳定：
-
textPath本身只做静态排布，不参与坐标系统变换 -
animateMotion试图移动整个<text></text>，但文字基线和路径对齐逻辑会被打乱，导致跳变或偏移 - 即使 Chrome 跑起来，
rotate="auto"对文字无效（它只影响图形元素）
正确做法是：
- 把文字转成
<path></path>（用 Figma / Illustrator 导出轮廓，或用getComputedTextLength()+ 手动拆字符定位） - 或改用 CSS 方案：每个字符用
<span></span>包裹，用offset-distance分段驱动（适合少量文字） - 更实际的选择：用
anime.js或GSAP控制transform: translate()+rotate()模拟路径运动，精度可控、调试直观
复杂路径的动画，靠纯 SVG 原生标签已经力不从心；浏览器厂商也在弱化 SMIL 支持。真正要落地，得接受「用 JS 控制关键点 + CSS 处理视觉反馈」这个现实分层。
