<animateMotion>

基线

广泛可用

自 2020年1月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

查看完整兼容性
了解更多

<animateMotion> SVG 元素用于定义元素如何沿运动路径移动。

备注：要复用已有路径，必须在 <animateMotion> 元素内使用 <mpath> 元素，而不是 path 属性。

使用上下文

类别	动画元素
允许的内容	任意数量、任意顺序的下列元素：描述性元素 `<mpath>`

属性

keyPoints: 此属性以 [0,1] 区间表示，对于 keyTimes 中每个关联值，对象沿路径行进了多远。值类型：<number>*；默认值：无；动画性：否
path: 此属性使用与 d 属性相同的语法定义运动路径。值类型：<string>；默认值：无；动画性：否
rotate: 此属性定义沿路径做动画的元素所应用的旋转，通常用于使元素朝向动画方向。值类型：<number> | auto | auto-reverse；默认值：0；动画性：否

备注：对于 <animateMotion>，calcMode 属性的默认值为 paced。

动画属性

动画时间属性: begin、dur、end、min、max、restart、repeatCount、repeatDur、fill
动画取值属性: calcMode、values、keyTimes、keySplines、from、to、by
其他动画属性: 最主要的有：attributeName、additive、accumulate
动画事件属性: 最主要的有：onbegin、onend、onrepeat

DOM 接口

该元素实现了 SVGAnimateMotionElement 接口。

示例

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

规范

规范
SVG Animations Level 2 # AnimateMotionElement

浏览器兼容性

参见

<mpath>

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 2026年9月29日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题