Почему эта анимация SVG не работает в кросс-браузере?

Question

У меня есть изображение SVG, созданное для меня на www.loading.io, а анимация работает только в Google Chrome (ст. 48). Я попытался открыть файл в Internet Explorer 11, Firefox (v. 44) и Edge (v. 25), и они только отображают исходное изображение без какой-либо анимации. Example. Вы также можете наблюдать за поведением, загружая SVG here.

Вот SVG разметка:

<?xml version="1.0" encoding="utf-8"?> 
<svg width='50px' height='50px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" 
    class="uil-ring"> 
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect> 
    <circle cx="50" cy="50" r="46" stroke-dasharray="145.95839468578177 143.06812944447918" stroke="#285e8c" fill="none" 
      stroke-width="8"> 
     <animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;" 
          keyTimes="0;0.5;1" dur=".75s" repeatCount="indefinite" begin="0s"></animateTransform> 
    </circle> 
</svg> 

Кто-нибудь знает, как я могу получить эту миленькую SVG анимацию на всех современных браузерах?

Answer 1

В спецификации SMIL указано, что durations cannot start with a . character - требуется нулевой нуль, и это то, что Firefox реализует. Я скорректировал все ниже, поэтому он работает в Firefox.

IE не поддерживает SMIL, хотя для его преодоления может использоваться fakeSmile library.

<?xml version="1.0" encoding="utf-8"?> 
 
<svg width='50px' height='50px' viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" 
 
    class="uil-ring"> 
 
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect> 
 
    <circle cx="50" cy="50" r="46" stroke-dasharray="145.95839468578177 143.06812944447918" stroke="#285e8c" fill="none" 
 
      stroke-width="8"> 
 
     <animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;" 
 
          keyTimes="0;0.5;1" dur="0.75s" repeatCount="indefinite" begin="0s"></animateTransform> 
 
    </circle> 
 
</svg>