Das Laden von Animationen funktioniert nicht in Edge

Question

Ich habe eine Ladeanimation, die in Chrome und Firefox einwandfrei funktioniert, aber in IE10 oder Edge überhaupt nicht.

Das ist mein html:

<svg viewBox="0 0 120 120" version="1.1"> 
    <symbol id="s-circle"> 
     <circle r="10" cx="20" cy="20"></circle> 
    </symbol> 
    <g> 
     <#list 1..9 as i> 
      <g class="g-circle"> 
       <use href="#s-circle"/> 
      </g> 
     </#list> 
    </g> 
</svg> 

und das ist mein SCSS:

$max: 9; 
$angle: 360/$max; 
$size: 160px; 
$fill: $grey; 

.cart__spinner { 
    position: relative; 
    overflow: hidden; 
    width: 280px; 
    height: 280px; 
    margin: 50px auto 0; 
} 

svg { 
    height: $size; 
    width: $size; 
    margin: 0 4em 4em; 
    overflow: visible; 
} 

@function transform($item: 1){ 
    $base: rotate(#{-$angle*$item}deg) translate(5px, 5px); 
    @return $base; 
} 

.g-circle { 
    transform-origin: $size/2 $size/2; 

    fill: $fill; 
    animation: opacity 1.2s linear infinite; 

    @for $item from 1 through $max { 
     &:nth-child(#{$max}n + #{$item}) { 
      animation-delay: -#{$item/10}s; 
      transform: transform($item) scale(.9); 
      -ms-transform: transform($item) scale(.9); 
     } 
    } 
} 



@keyframes opacity { 
    0% { 
     fill-opacity: 1; 
    } 
    100% { 
     fill-opacity: 0; 
    } 
} 

@keyframes transform { 
    10% { 
     transform-origin: 70px 70px; 
     transform: scale(.75); 
    } 
} 

In IE10 oder Kante, gibt es nur einen Punkt auf der Seite und nicht die Animation. Kann mir bitte jemand erklären, warum das passiert. Di Ich muss explizit Unterstützung für IE hinzufügen?

Dank

Answer 1

dachte ich, mein Problem ist, dass IE-Animationen auf svg nicht unterstützt.