重复动作用于重复动画。重复属性有两种类型, 可让你重复动画。
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>
【SVG重复动作用法示例】立即测试
推荐阅读
- SVG旋转转换用法示例
- SVG光栅图像示例和解释
- SVG径向渐变用法示例
- SVG遮罩mask用法示例
- SVG线性渐变用法示例
- SVG渐变使用示例
- SVG feTurbulence过滤器用法示例
- SVG feoffset过滤器用法示例
- SVG feFlood过滤器用法示例