Geek Answers Handbook

How to start an animation at the end of another animation?

I am trying to truncate a point from white to red, and then from white to red.

This is what I have so far:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" 
to="#fff" xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" />

I want the second animation to start, when the first ends, I know that this is possible, I just can not understand.

+5
source share
1 answer

Using your example, here's how:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
  xlink:href="#test" dur="2s" fill="freeze" />  
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test"
  begin="testies.end" dur="2s" fill="freeze" />

or as an equivalent alternative without syntax xlink:href:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485">
  <animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
    dur="2s" fill="freeze" />  
  <animate attributeName="fill" from="" to="#ED1C24"
    begin="testies.end" dur="2s" fill="freeze" />
</circle>

So, just add the identifier of the element from which you want to start another animation, and add the suffix ".end". You can also specify ".begin" to start at the beginning of the animation or add a temporary offset, for example begin="someId.end+2s".

, : id, , , , . . , SVG 1.1 ( " " ).

, . begin .

+6

More articles:


All Articles