animateMotion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<animateMotion> 元素定义了一个元素如何沿着运动路径进行移动。

备注： 为了复用一个已经定义的路径，就有必要使用一个 <mpath> 元素嵌入到 <animateMotion> 中，而不是使用 path。

示例

css

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

xml

<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>

使用上下文

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

属性

Global 属性

专有属性

DOM 接口

该元素实现了 SVGAnimateMotionElement 接口。

规范

Specification
SVG Animations Level 2 # AnimateMotionElement