CODEWITHSUNDEEP
internet-exploreranimationsvgurismil
whyoz
whyoz

Reputation: 5246

SVG code inside encodeURIComponent not working in IE

I'm trying to animate anything inside a encodeURIComponent() in IE. I know SMIL isn't supported by IE, but it's just so much easier than using pure JS to animate/rotate an svg tag. Here is an example of something that works in Firefox and Chrome, but not IE:

var uri = encodeURIComponent(
                '<?xml version="1.0" encoding="utf-8"?>' +
                '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 120 40" xml:space="preserve">' +
                '<script type="text/javascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>' +
                    '<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">' +
                    '<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" />' +
                    '</circle>' +
                 '</svg>');

You will notice the xlink:href to the FakeSmile that I would think should handle the animation with no problem, since it's not dynamic. If you try a similar fiddle, you will see it works in IE when inside the tag:

http://jsfiddle.net/FG3PG/1/

Does this work because of some meta tags or other html code on jsfiddle's end? Or is it the fact the code I included is wrapped in a encodeURIComponent()? Ultimately the svg needs to be wrapped or it won't show up at all, regardless of it animating.

Upvotes: 0

Views: 679

Answers (1)

Robert Longson
Robert Longson

Reputation: 124199

Javascript will not run in image elements.

Browsers with native SMIL will run the animation, but fakesmile is a javascript emulation of SMIL and will not work in an image so your animation does not run in IE.

Upvotes: 1

Related Questions