我想为SVG动画循环的每次迭代添加一个延迟.这是一个简单的例子.
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<circle cx="50" cy="50" r="15" fill="blue">
<animate id="op" attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
使用begin只会延迟第一次迭代,那么有没有办法延迟每次迭代？
解决方法
您可以将SMIL动画元素的结束事件添加到
此外,您可以添加多个值,以;分隔;到这个开始属性：
begin属性.
此外,您可以添加多个值,以;分隔;到这个开始属性：
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<circle cx="50" cy="50" r="15" fill="blue">
<animate id="op" attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="3s" begin="3s;op.end+3s" />
</circle>
</svg>