每次重复时SVG动画延迟

Question

我想为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仅使用延迟第一次迭代,那么是否有延迟每次迭代的方法？

Answer 1

您可以将endSMIL动画元素的事件添加到begin属性中.
此外,您可以添加多个值,;由此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>