SVG - Delay of Animation, Element is visible before width starts to grow

Question

i want to animate the width of a <rect> with a delay of 1s. the animation starts correctly after 1s but until than the <rect> is fully visible - what is not my intesion! it has got to be unvisible until the rectangle starts to grow ...

the code:

<rect x="25.847" y="161.813" fill="#007188" stroke="#FFFFFF" width="211.671" height="14.014">
        <animate attributeName="width" attributeType="XML" begin="1s" dur="2s"  
            fill="freeze" from="0" to="211.671"/>
    </rect>

how come?

Answer 1

You can make one animation begin when another does. Like this...

<rect x="25.847" y="161.813" fill="#007188" stroke="#FFFFFF" width="211.671" height="14.014" visibility="hidden">
    <animate id="a1" attributeName="width" attributeType="XML" begin="1s" dur="2s"  
        fill="freeze" from="0" to="211.671"/>
    <set attributeName="visibility" from="hidden" to="visible" begin="a1.begin"/>
</rect>

Or you could just make the second animation begin at 1s