animateMotion

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

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接口。

规范

浏览器兼容性

相关内容

• <mpath>