SVG动画延迟

Question

要求：我对每个动画的延迟设置都有一些麻烦。

演示：https://codepen.io/anon/pen/OxJXvZ

但逻辑是不同的。每一行必须逐一用蓝色填充。

如果我设置了begin属性，它会完全崩溃任何动画规则

这是我的 CODE ：

<linearGradient id="first">
<stop offset="0" stop-color="#4caddb">
    <animate id="anima1" begin="anima2.end" dur="1s" attributeName="offset" fill="freeze" from="0" to="1" repeatCount="indefinite" />
</stop>
<stop offset="0" stop-color="#E1E1E1">
    <animate dur="1s" attributeName="offset" fill="freeze" from="0" to="1" repeatCount="indefinite" />
</stop>
</linearGradient>

和

<linearGradient id="third">
<stop offset="0" stop-color="#E1E1E1">
    <animate id="anima2" dur="1s" begin="anima1.end" attributeName="offset" fill="freeze" from="1" to="0" repeatCount="indefinite" />
</stop>
<stop offset="0" stop-color="#4caddb">
    <animate dur="1s" attributeName="offset" fill="freeze" from="1" to="0" repeatCount="indefinite" />
</stop>
</linearGradient>

我错过了什么？

Answer 1

repeatCount="indefinite"的动画没有结束，因此您的引用动画永远不会启动。请改用begin="anima1.repeat"。每次引用的动画重新开始时都会引发此事件。