个性化阅读
专注于IT技术分析

SVG重复动作用法示例

重复动作用于重复动画。重复属性有两种类型, 可让你重复动画。

repeatCount:设置为一个整数值, 该值指示你希望特定动画重复多少次。

repeatDur:设置为一个时间, 该时间告诉重复应该持续多长时间。

同步动画与重复

例子

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">

<circle cx="30" cy="60" r="30" style="fill: purple; fill-opacity: .4; stroke: black;">
<animate id="circle-anim" attributeName="cx" attributeType="XML"
 begin="0s" dur="6s" repeatCount="4"
 from="60" to="260" fill="freeze"/>
</circle>

<circle cx="250" cy="150" r="30" style="fill: green; fill-opacity: .4; stroke: black;">
<animate attributeName="cx" attributeType="XML"
 begin="circle-anim.repeat(1)+.5s" dur="8s" repeatDur="12s"
 from="260" to="60" fill="freeze"/>
</circle>

</svg>
</body>
</html>

立即测试

赞(0) 打赏
未经允许不得转载:srcmini » SVG重复动作用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏