Change SVG object color with animation

Question

Change SVG object color with animation

Navigation

#1 by (4 votes)

2

Using the animateColor tag, I wanted to change the color of an SVG object. Example jsfiddle but does not 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>

link

html svg

asked by anonymous 13.04.2015 / 23:56

1 answer

How do I generate a summary or excerpt of each post? $ _GET ['id'] does not return value

score 4 · Accepted Answer

The animateColor element you used has been discontinued because it is redundant with the animate element, which 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>