<animateMotion>元素用于沿单行路径以及任意路径对对象进行动画处理。
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">
<g>
<rect x="0" y="0" width="30" height="30" style="fill: gray; stroke: black"/>
<circle cx="30" cy="30" r="15" style="fill: red; stroke: black;"/>
<animateMotion from="0, 0" to="60, 30" dur="4s" fill="freeze"/>
</g>
</svg>
</body>
</html>立即测试
复杂路径上的动画
如果希望动画沿更复杂的路径移动, 请使用path属性及其值, 其格式与<path>元素中的” d”属性相同。
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg width=500 height="500">
<path d="M50, 125 C 100, 25 150, 225, 200, 125"
style="fill: none; stroke: green;"/>
<path d="M-10, -3 L10, -3 L0, -25z" style="fill: yellow; stroke: black;">
<animateMotion
path="M50, 125 C 100, 25 150, 225, 200, 125"
dur="6s" fill="freeze"/>
</path>
</svg>
</body>
</html>立即测试
