why doesn't the second rectangle stay visible in my SVG code

Question

I have this piece of code which as I understand it should draw the first rect tangle and then the second. The second has animation which simply expands the width. So with this code I see the blue bar appear then I see the yellow bar appear and it grows as expected but when it finishes it disappears.The both have the same start points and width so it making a progress bar. The blue bar is 400 pixels in length, the yellow is only 250 so I should see 150 pixels of blue at least that is what I think should be happening

<svg xmlns='http://www.w3.org/2000/svg'>
    <rect x='10' y='10' height='20' width='400' style='stroke:#ff0000; fill: #0000ff'>
    </rect>
    <rect x='10' y='10' height='20' width='0' style='stroke:#ff0000; fill: #ffff00'>
<animate attributeName='width' attributeType='XML'
    to='250'
    begin='0s'
    dur='2s' /> 
    </rect>
</svg>

I am still new to SVG but this should work from what I have read the yellow bar is done last so it be on top.

Possible duplicate of [How to animate svg rect to grow](https://stackoverflow.com/questions/31200679/how-to-animate-svg-rect-to-grow) — r3mainer, Dec 04 '17 at 21:33
I think the other question had to do more with direction. I can get it to grow fine but I was having an issue with it disappearing when done your animate fill:"freeze" did the trick — Jeff Janes, Dec 04 '17 at 21:39

jsbueno · Accepted Answer · 2017-12-04T22:20:07.477

Your animate tag have to include an explicit fill parameter with the value 'freeze'. Otherwise, the default fill='remove' is used, which means the animated parameter reverts back to the value it had before the animation (in this case, "0").

<svg xmlns='http://www.w3.org/2000/svg'>
    <rect x='10' y='10' height='20' width='400' style='stroke:#ff0000; fill: #0000ff'>
    </rect>
    <rect id="r1" x='10' y='10' height='20' width='0'  style='stroke:#ff0000; fill: #ffff00'>
<animate attributeName='width' attributeType='XML'
    from='0'
    to='250'
    begin='0s'
    dur='2s'
    fill='freeze'
         />
    </rect>
</svg>

(full reference at: https://www.w3.org/TR/SVG/animate.html#ValueAttributes)

why doesn't the second rectangle stay visible in my SVG code

1 Answers1