SVG animateMotion元素用法示例

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

立即测试

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?