animateMotion - SVG 编辑

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

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

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

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

用法

属性

Global 属性

• 条件处理属性 »
• 核心属性 »
• 动画事件属性 »
• Xlink属性 »
• 动画定时属性 »
• 动画值属性 »
• An动画累加属性 »
• externalResourcesRequired

专有属性

• calcMode
• path
• keyPoints
• rotate
• origin

DOM接口

该元素实现了SVGAnimateMotionElement接口。

规范

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

相关内容

• <mpath>