锐客网

  1. 首页 > 睿知 > it技术 > >

SVG animateMotion元素用法示例

svgIT知识

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

【SVG animateMotion元素用法示例】立即测试

    推荐阅读


    上一篇：SVG动画（使用时间介绍和示例）

    下一篇：SVG animateTransform元素示例