animatemotion
<animateMotion>元素使引用的元素沿着运动路径移动。
用法上下文
分类 | 动画元素 |
|---|---|
允许的内容 | 以任意顺序包含以下任意数量的元素：描述性元素<mpath> |
属性
全局属性
- Conditional processing attributes »
- Core attributes »
- Animation event attributes »
- Xlink attributes »
- Animation timing attributes »
- Animation value attributes »
- Animation addition attributes »
externalResourcesRequired
具体属性
calcMode
DOM接口
这个元素实现了SVGAnimateMotionElement接口。
例
SVG
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Draw the outline of the motion path in grey, along
with 2 small circles at key points -->
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<!-- Red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>Result
产品规格
Specification | Status | Comment |
|---|---|---|
SVG Animations Level 2The definition of '<animateMotion>' in that specification. | Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<animateMotion>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | No support | (Yes) | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
