Forum Moderators: phranque

Message Too Old, No Replies

SVG animation in Internet Explorer and other issues

Why does IE need to make everything so complicated

         

NickMNS

7:02 pm on Sep 25, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have been hard at work building interactive graphs in SVG. My latest creation is a pie-chart where when you click a button the pie piece rotates to 12 o'clock, all the other pieces disappear and information specific to that slice is displayed.

SMIL is used for all the animation. It works great in Opera, Chrome etc. But it does not work in IE, since SMIL is not supported.

I am using JQuery and/or Javascript (I am also having some issues with JQuery) to populate the graph with data.

My question, what should I do?
Should I simply forget about IE users and let them suffer for their poor choice of browser?
Should I design the pie-chart to degrade gracefully so that it looks okay but not include any animation for IE users?
Should I continue using SMIL, but implement Fakesmile, so that it will run on IE?
Should I use JS/JQ to handle the animation and ensure it works across all browsers?

Does anyone have any experience with SVG, and more specifically with SVG animation?

iamlost

12:21 am on Sep 26, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Given that SMIL support is 'not currently planned' for Edge (and is not in IE) and since Chrome 45 and Opera 32 SMIL has been deprecated with expectation of being dropped in some subsequent version of each I suggest that an alternate method be used going forward.

Unfortunately CSS3 and Web Animations do not yet provide a full replacement ability nor does any browser yet provide better than partial support of that.

Currently the best solution I know is to work with one of the JavaScript drawing libraries.
I like both snapsvg.io and d3js.org but there are others so do your research and test drive a few for the best fit for your requirements.

NickMNS

12:27 pm on Sep 26, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Iamlost thanks for the tips, I looking into snap-svg right now.

I use Opera and it was just upgraded to version 40 this last week, and SMIL is still working, mind you I am still getting the message. I can't understand why SMIL is being deprecated.

NickMNS

6:43 pm on Sep 29, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I checked out snap.svg, but in the end I decided to forgoe it for this time. The main reasons are that I do not want load in another library when I already have JQuery, and do not want to have to spend too much time trying to figure out how Snap works.

My final solution was to do the animation in CSS, and all the on page automation is handled with JQuery. The only place where I still have an issue is with the rotations in Internet Explorer 11. But at this point, I'm not going to waste more time to try and find a solution. The graph is still legible.