<animateMotion>

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

<animateMotion> SVG 元素提供了一种定义元素沿运动路径移动方式的方法。

注意： 要重用现有路径，需要在 <animateMotion> 元素内部使用 <mpath> 元素，而不是使用 path 属性。

使用语境

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

属性

关键点: 此属性指示对象在路径上的进度，范围为 [0,1]，对应于每个 keyTimes 的关联值。值类型：<number>*; 默认值：无；可动画：否
路径: 此属性使用与 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 动画级别 2 # AnimateMotionElement

浏览器兼容性

另见

<mpath>

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年6月6日⁩，由 MDN 贡献者进行编辑。

在 GitHub 上查看此页面 • 报告此内容的错误