animateMotion

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

用法

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

属性

Global 属性

专有属性

DOM接口

该元素实现了SVGAnimateMotionElement接口。

规范

Specification Status Comment
SVG Animations Level 2
<animateMotion>
Editor's Draft No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<animateMotion>
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
animateMotionChrome Full support YesEdge Full support ≤79Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android Full support Yes
calcModeChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
keyPointsChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
originChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pathChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rotateChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

相关内容