<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 属性
专有属性
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 |
浏览器兼容性
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.