Svg rotazione animazione con css non funziona su ie o bordo

Question

Sto lavorando su un'animazione di uno spinner su un svg. Sfortunatamente, sto avendo problemi con ie o edge. Sono supportati tutti gli altri browser.

Ecco la codepen: http://codepen.io/skjnldsv/pen/oxyjoQ

Come si può vedere le opere di animazione di opacità, ma non la rotazione. C'è qualche tipo di prefisso che mi manca, oppure il supporto svg è rotto in ie/edge?

Grazie

ecco i due svg, primo non funziona, secondo è ok.

<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50"> 
    <style> 
     .spinner { 
      transform-origin: 25px 25px; 
      -webkit-transform-origin: 25px 25px; 
      animation: loading-spin .8s infinite linear; 
      -webkit-animation: loading-spin .8s infinite linear 
     } 
     @-webkit-keyframes loading-spin { 
      100% { -webkit-transform: rotate(360deg); } 
     } 
     @keyframes loading-spin { 
      100% { transform: rotate(360deg); } 
     } 
    </style> 
    <defs> 
     <clipPath id="a"> 
      <path d="M0 0h25v25H0z" /> 
     </clipPath> 
    </defs> 
    <g fill="none"> 
     <circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" /> 
     <circle class="spinner" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" /> 
    </g> 
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50"> 
    <style> 
    .spinner2 { 
     transform-origin: 25px 25px; 
     -webkit-transform-origin: 25px 25px; 
     animation: loading-spin2 .8s infinite linear; 
     -webkit-animation: loading-spin2 .8s infinite linear 
    } 
    @-webkit-keyframes loading-spin2 { 
     100% { opacity:0; } 
    } 
    @keyframes loading-spin2 { 
     100% { opacity:0; } 
    } 
    </style> 
    <defs> 
     <clipPath id="a"> 
      <path d="M0 0h25v25H0z" /> 
     </clipPath> 
    </defs> 
    <g fill="none"> 
     <circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" /> 
     <circle class="spinner2" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" /> 
    </g> 
</svg> 

Answer 1

Ho avuto lo stesso problema io stesso. Dopo aver scavato in giro ho scoperto che le trasformazioni CSS in SVG non sono supportate da Edge al momento. È davvero fastidioso, ma l'unica opzione è usare Javascript per animare un SVG on Edge.

È possibile seguire lo stato della funzione sul sito Microsoft Edge.

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/