<animateMotion> 是 SVG 中实现路径动画的原生元素，通过引用 <path> 的 d 属性定义轨迹，支持 href 绑定、keyPoints/keyTimes 控制节奏、rotate 自动对齐切线、calcMode="paced" 保障视觉匀速，并可结合交互与复合动画。
SVG 的 <animateMotion> 元素专门用于让元素沿指定路径平移运动，是实现路径动画最直接、语义最清晰的方式。 它不依赖 JavaScript，纯 SVG 原生支持，兼容性好（IE9+，现代浏览器完全支持），且能精准控制起止、时长、重复和关键帧偏移。
路径定义：用 d 属性描述轨迹
动画路径必须由 <path> 元素提供，其 d 属性定义贝塞尔曲线、直线或弧线等任意形状。该路径本身可隐藏（visibility="hidden" 或不设描边/填充）。
例如，一个从左到右的缓动弧线：
<path id="myPath" d="M 50 200 Q 150 100, 250 200" fill="none" stroke="none"/>绑定动画：将目标元素套入 <animateMotion>
需将要运动的图形（如 <circle>、<text> 或 <g>）包裹在 <animateMotion> 内，并通过 href（推荐）或 mpath 引用路径：
立即学习“前端免费学习笔记（深入）”；
<animateMotion dur="3s" repeatCount="indefinite">
<mpath href="#myPath"/>
</animateMotion>
</circle>
注意：mpath 必须是 <animateMotion> 的**直接子元素**；href 属性写法更现代，也可用旧式 xlink:href（兼容 IE/Safari 旧版）。
关键控制属性：起点、方向、旋转与节奏
<animateMotion> 提供多个实用属性微调运动表现：
-
keyPoints：配合keyTimes实现非匀速运动（如“先慢后快”）。例如keyTimes="0;0.5;1"+keyPoints="0;0.2;1"表示前半程只走 20% 路径 -
rotate：控制元素是否随路径切线自动旋转。rotate="auto"自动对齐切线方向；rotate="auto-reverse"反向对齐（避免上下颠倒）；设具体角度（如rotate="45"）则固定旋转 -
calcMode：设为"paced"可让动画在复杂路径上保持视觉匀速（默认"linear"按时间线性插值，可能在曲率大处显得忽快忽慢）
进阶技巧：暂停、交互与组合动画
可通过 CSS 类名切换或 JS 控制 <animateMotion> 的播放状态：
- 添加
begin="click"或begin="myButton.click"实现点击触发动画 - 用
end="mouseover"或onbegin/onend事件回调增强交互 - 可与其他动画（如
<animateTransform>缩放、<animate>填充色）并行嵌套，实现复合效果
不复杂但容易忽略：动画默认以路径起点为初始位置，若想让元素起始就位于路径中段，需预先设置其 cx/cy 或使用 getPointAtLength() 计算坐标再定位。
