SVG原生animateMotion是沿贝塞尔路径运动的最佳方案，通过mpath引用path的d属性（如M0,0 C50,100 150,100 200,0），配合keyTimes/keyPoints实现非线性速度控制，兼容性优于CSS offset-path。
用 animateMotion 让元素沿贝塞尔路径运动（HTML5 SVG 原生方案）
HTML5 本身不提供通用的“元素沿贝塞尔曲线运动”的 DOM API，但 SVG 的 <animateMotion> 是标准且无需 JS 的原生解法。它直接支持三次贝塞尔路径（d 属性语法），浏览器原生渲染、性能好、可被 CSS 动画属性控制（如 fill、restart）。
常见错误是试图用 CSS transform: translate() + @keyframes 拼贝塞尔点——这只能近似，且无法保证匀速或精确锚点对齐；还有人误用 Canvas 手动计算，徒增复杂度。
-
<animateMotion>必须嵌套在<g>或带transform的容器内，不能直接写在普通 HTML 元素上 - 路径必须是 SVG
<path>的d值，例如M0,0 C50,100 150,100 200,0，不是 CSSpath()函数 - 动画目标元素需用
<g>包裹，并设transform="translate(0,0)"作为起点参考系
贝塞尔路径怎么写进 animateMotion？
关键不是“怎么画”，而是“怎么让运动节点贴着路径走”。SVG 要求你提供一条完整路径（<path>），再用 <mpath> 引用它。路径的起始点（M）决定元素初始位置，元素自身中心默认对齐路径上的当前点。
示例：一个圆沿三次贝塞尔曲线从 (0,0) 到 (200,0)，拱高 100px
立即学习“前端免费学习笔记（深入）”；
<svg width="300" height="200">
<path id="curve" d="M0,0 C50,100 150,100 200,0" fill="none" stroke="#ccc"/>
<g>
<circle r="6" fill="#3498db"/>
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#curve"/>
</animateMotion>
</g>
</svg>
-
C后接四组坐标：控制点1、控制点2、终点，共 6 个数字 -
href="#curve"必须用 ID 引用，不能写内联d值 - 若想让圆“底部”贴路径（比如模拟小车轮子），需提前用
transform="translate(0,6)"把圆心下移半径值
想控制速度曲线或暂停/反向？用 keyPoints 和 keyTimes
animateMotion 默认匀速（线性时间映射），但贝塞尔路径本身是几何曲线，视觉上常需缓入缓出。这时不能靠 CSS animation-timing-function，而要用 SVG 自带的 keyPoints + keyTimes 映射非线性进度。
-
keyTimes="0; 0.5; 1"定义三个时间点 -
keyPoints="0; 0.2; 1"表示：50% 时间只走了 20% 路程（缓入），后半段加速 - 两属性长度必须一致，且值范围为 0–1
- 不支持贝塞尔插值函数（如
cubic-bezier(.4,0,.6,1)），只能分段线性逼近
加到上面示例的 <animateMotion> 内即可：keyTimes="0; 0.3; 0.7; 1" keyPoints="0; 0.1; 0.9; 1"
现代替代方案：CSS offset-path（但兼容性有限）
Chrome 115+、Firefox 119+、Safari 17.4+ 支持 offset-path + offset-distance，写法更简洁：
.mover {
offset-path: path('M0,0 C50,100 150,100 200,0');
animation: slide 2s infinite;
}
@keyframes slide {
to { offset-distance: 100%; }
}
但它目前不支持 offset-rotate 自动朝向切线（需额外 JS 计算角度），且 IE/旧版 Safari 完全不支持。如果项目需兼容到 Chrome 80 或 iOS 15 以下，仍应首选 animateMotion。
真正容易被忽略的是：无论用哪种方案，路径坐标单位和视口尺寸强相关；缩放 SVG 或改变 viewBox 会直接影响运动范围，调试时务必固定 width/height 或用 preserveAspectRatio 控制缩放行为。
