animateTransform вопросы в разных зрителях

Question

Итак, я создал собственный фирменный виджет SVG с анимацией, который я надеялся использовать на различных устройствах, которые мы публикуем для приложения, включая, но не ограничиваясь, магазин приложений Windows.

У меня есть несколько сложный SVG, где только один элемент на самом деле нуждается в анимации, чтобы супер вырезать его здесь.

<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

Что, если я его просмотра в Firefox, работает, как ожидалось, и вертушка вращается (во всей версии, она вращается вокруг логотипа). Итак, я пробую это в IE, и он отображает путь, но не выполняет анимацию.

Это проблема, так как я могу только предположить, как только я загружу ее в фактическое приложение (которое мы делаем с помощью Angular/HTML5/Ionic на передней панели), что мы также будем ориентировать приложение для хранения Windows, что может произойти такое же отсутствие анимации.

Мой вопрос: есть ли что-то, что мне не хватает, чтобы оно работало, как ожидалось, везде? По общему признанию, я довольно классный парень xaml/xml, но я никогда не использовал навыки для svg, но мне действительно нравится потенциал!

Так что еще одна пара глаз будет оценена, чтобы научить меня моей глупости, спасибо!

Answer 1

IE does not support SMIL natively. Вы можете сделать это с помощью fakesmile, хотя