html - 每次重复的 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

您可以将 SMIL 动画元素的 end 事件添加到 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>