svg - 「set」要素 - ループ

Question

私は持っている：

<set attributeName="visibility" attributeType="CSS" to="visible" begin="5s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="10s" fill="freeze"/>

これらの命令を実行するループが必要です。

Answer 1

アイテムを継続的に「点滅」させたい場合は、アニメーションに継続時間を設定し、もう一方が終了したときに開始するように設定する必要があります。例えば：

デモ： http： //jsfiddle.net/rnSFY/

<svg xmlns="http://www.w3.org/2000/svg">
  <circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
    <set id="show" attributeName="visibility" attributeType="CSS" to="visible"
         begin="0s; hide.end" dur="1s" fill="freeze"/>
    <set id="hide" attributeName="visibility" attributeType="CSS" to="hidden"
         begin="show.end" dur="1s" fill="freeze"/>
  </circle>
</svg>​

Answer 2

2 つの異なる静的set要素を切り替えるのではなくanimate、非表示と表示を無期限に切り替える 1 つの要素を使用できます。

また、別の名前付きアニメーションの終了イベントで開始タイミングを配線することについて心配する必要もありません。

<svg xmlns="http://www.w3.org/2000/svg">
  <circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
    <animate attributeType="CSS"
             attributeName="visibility"
             from="visible" 
             to="hidden"
             dur="1s"
             repeatCount="indefinite"/>
  </circle>
</svg>