SVGアニメーション遅延

Question

要件：各アニメーションの遅延設定に問題があります。

デモ：https://codepen.io/anon/pen/OxJXvZ

しかし、ロジックが異なっています。各行は青色で1つずつ塗りつぶされなければなりません。

<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> 

私は何をしないのです：

私が始まる属性を設定した場合、それは完全にここで任意のアニメーションルール

をクラッシュは私のCODEのですか？

Answer 1

repeatCount="indefinite"のアニメーションは終了しないため、参照するアニメーションは決して開始しません。代わりにbegin="anima1.repeat"を使用してください。このイベントは、参照アニメーションが新たに開始するたびに発生します。