The ‘set’ element - loop

Question

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.

Your question is not clear. What do you mean by "the loop"? Are you saying that you want to use SMIL animation to repeatedly show and hide an item every 5 seconds? — Phrogz, Jun 04 '12 at 15:26
possible duplicate of [How to loop SVG animation sequence?](http://stackoverflow.com/questions/3629987/how-to-loop-svg-animation-sequence) — Phrogz, Jun 04 '12 at 15:30

score 5 · Answer 1 · answered Jun 04 '12 at 15:35

5

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>

answered Jun 04 '12 at 15:35

Phrogz

271,922
98
616
693

Phrogz, why not a simple animate? – KyleMit Dec 21 '14 at 15:47
1

@KyleMit I don't know; it's hard to remember what I was thinking 2.5 years ago. If you feel that you have an alternative and good solution, I suggest that you ought to post an answer. Oh wait, you did! +1 :) – Phrogz Dec 21 '14 at 16:08

score 4 · Answer 2 · answered Dec 21 '14 at 15:47

Rather than toggling back and forth between two different static set elements, you can use a single animate that switch between hidden and visible indefinitely.

Then you also don't need to worry about wiring up the begin timing with the end event of another named animation

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

The ‘set’ element - loop

2 Answers2

Demo: http://jsfiddle.net/rnSFY/