animation - ループ時の SVG アニメーションの不透明度

Question

svg パスの不透明度を 0 から 100 に戻し、連続ループで 0 に戻し、100 に戻したいと考えています。

これまでのところ、0 から 100 までアニメートすることはできますが、元に戻すことはできません。

何か案は？

ありがとう

Answer 1

values次のように、属性を使用して任意の数の値をアニメーション化できます。

<rect x="10" y="10" width="20" height="20">
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

これは、不透明度 0 から不透明度 1 (100%) までアニメートし、1 秒かけて再び 0 に戻ります。

Answer 2

不透明度が増加するアニメーションと減少するアニメーションの 2 つがあります。それぞれが他の終了時に始まりますが、最初のものも 0 から始まります。rect の例を次に示します。

<rect x="10" y="10" width="20" height="20">
    <animate id="animation1"
             attributeName="opacity"
             from="0" to="1" dur="1s"
             begin="0s;animation2.end" />
    <animate id="animation2"
             attributeName="opacity"
             from="1" to="0" dur="1s" 
             begin="animation1.end" />
</rect>