animateTransform issues in different viewers

Question

So I made a custom company branded SVG animated spinner that I had hopes of utilizing on the various devices we're publishing an app for including but not limited to, the windows app store.

I've got a somewhat complex SVG where only one element actually needs to animate, to super cut it down here's an example;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="97.667px" height="99.167px" viewBox="0 0 97.667 99.167" enable-background="new 0 0 97.667 99.167" xml:space="preserve">
<radialGradient id="Spinner_1_" cx="19.126" cy="34.7881" r="45.2812" fx="54.2395" fy="6.1973" gradientUnits="userSpaceOnUse">
    <stop  offset="0.2788" style="stop-color:#FAEE3B;stop-opacity:0.75"/>
    <stop  offset="0.6303" style="stop-color:#FFCF01;stop-opacity:0.6"/>
    <stop  offset="0.8667" style="stop-color:#F9B916;stop-opacity:0.4"/>
    <stop  offset="1" style="stop-color:#F6A21D;stop-opacity:0"/>
</radialGradient>
<path id="Spinner" fill="url(#Spinner_1_)" d="M89.567,43.292c0.254,1.854,0.396,3.744,0.396,5.668c0,22.921-18.582,41.5-41.5,41.5
    s-41.5-18.579-41.5-41.5c0-22.92,18.582-41.5,41.5-41.5c0.068,0,3.495-2.585,0.203-5.999c-0.01-0.01-0.026-0.001-0.04-0.001
    c-26.234,0-47.5,21.266-47.5,47.5s21.266,47.5,47.5,47.5c26.233,0,47.5-21.266,47.5-47.5c0-2.583-0.214-5.116-0.61-7.588
    L89.567,43.292z">
    <animateTransform attributeName="transform" attributeType="XML"
           type="rotate" from="0 48.8335 48.8335" to="360 48.8335 48.8335"
           dur="0.6s" repeatCount="indefinite"/>
</path>
</svg>

CodePen

Which if I view it in Firefox, works as expected, and the spinner spins (in the whole version, it spins around a logo). So then I try it over in IE, and it displays the path but doesn't perform the animation.

This is a problem, since I can only assume once I load it into the actual app (which we're making with Angular/HTML5/Ionic on the front) that we'll also be targeting windows store app with, that the same lack of animation could occur.

My question is, is there something I'm missing to ensure it works as expected everywhere? Admittedly I'm a pretty awesome xaml/xml guy, but I've never used the skills for svg but I really like the potential!

So another pair of eyes would be appreciated to teach me my folly, thanks!

Answer 1

IE does not support SMIL natively. You can make it do so with the help of fakesmile though