animateMotion
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
<animateMotion>
元素定义了一个元素如何沿着运动路径进行移动。
示例
css
html,
body,
svg {
height: 100%;
margin: 0;
padding: 0;
display: block;
}
xml
<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 |
---|
SVG Animations Level 2 # AnimateMotionElement |
浏览器兼容性
BCD tables only load in the browser