The ‘set’ element - loop

smil, svg

Solution

If you want the item to continuously "blink" on and off, you need to set the animations to have a duration and begin when the other ends. For example:

Demo: 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>​

Problem

I have: ``` <set attributeName="visibility" attributeType="CSS" to="visible" begin="5s" fill="freeze"/> <set attributeName="visibility" attributeType="CSS" to="hidden" begin="10s" fill="freeze"/> ``` I want the loop to perform these instructions.

Original source

Related problems