SVG動畫延遲

Question

要求：我對每個動畫的延遲設置有一些問題。

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

但邏輯是不同的。每行必須用藍色逐個填充。

如果我設置了開始的屬性，它完全崩潰任何動畫規則

這裏是我的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"。每次引用的動畫重新開始時都會引發此事件。