Change SVG object color with animation

Asked

Viewed 205 times

2

Using the animateColor tag, I wanted to change the color of an SVG object. Example jsfiddle but it doesn’t work:

<svg width="500" height="650" >
<rect ry=5 rx=0 x=150 y=100 width=90 height=100 style="fill:red">
    <animateColor attributeName="fill" attributeType="CSS" 
        from="#ffd700" 
        to="lightblue"  
        dur="5s"
    /> 
</rect>
</svg>

http://jsfiddle.net/b577jhd9/

html svg

1 answer

4


The element animateColor that you used was discontinued because it is redundant with the element animate, that works:

    <svg width="500" height="650" >
    <rect ry=5 rx=0 x=150 y=100 width=90 height=100 style="fill:red">
        <animate attributeName="fill" attributeType="CSS" 
            from="#ffd700" 
            to="lightblue"  
            dur="5s"
        /> 
    </rect>
    </svg>

Browser other questions tagged html svg

You are not signed in. Login or sign up in order to post.