CODEWITHSUNDEEP
jquerysvgjquery-svg
SivaRajini
SivaRajini

Reputation: 7375

SVG animation not working in IE9/IE10 but works in Firefox and chrome

Please refer the below code.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="curtainClip">
            <rect id="clipRect" x="0" y="0" width="100" height="100"/>
        </clipPath>
    </defs>

    <animate xlink:href="#clipRect"
        attributeName="width" 
        dur="15s"
        from="0" 
        to="100" />

    <path clip-path="url(#curtainClip)" stroke="red" d="M 0 0 L 100 100"/>
</svg>

SVg animate element not working in IE browser. how can i fix this ? whether it is bug in IE10 browser or i need to add any further code to work in IE browser.

i have referred the following link.

Can't make SVG animation work with ie9 and firefox

Thanks,

Siva

Upvotes: 1

Views: 3779

Answers (1)

SirCxyrtyx
SirCxyrtyx

Reputation: 387

You're using SMIL (declarative) animation, which is not supported in Internet Explorer. As far as I can tell, Microsoft has no plans to ever support it. From this page,

"script-based animation opens the door to simple as well as complex animation possibilities. Because of this, and for other reasons (such as CSS animations), IE9 does not support declarative animation."

Microsoft really wants you to use script based animation. So if you want your SVG to animate in all current browsers, you'll need to do it with Javascript. Alternatively, as hinted at by Microsoft, you could use CSS animation. In my opinion, a CSS animation would be the best choice for the simple animation in your example.

Upvotes: 3

Related Questions