Svg Rotation Animation mit CSS funktioniert nicht auf ie oder Kante

Question

Ich arbeite an einer Animation eines Spinner auf einer Svg. Leider habe ich Probleme mit ie oder edge. Jeder andere Browser wird unterstützt. Hier

ist die codepen: http://codepen.io/skjnldsv/pen/oxyjoQ

Wie Sie die Opazität Animation Werke sehen können, nicht aber die drehen. Gibt es eine Art von Präfix ich fehlt, oder ist die Svg-Unterstützung in ie/Kante gebrochen?

Dank

hier die zwei svg, erste nicht, zweite Arbeits ist 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

Ich hatte gerade das gleiche Problem. Nach dem Durchforsten habe ich herausgefunden, dass CSS-Transformationen in SVGs im Moment nicht von Edge unterstützt werden. Es ist wirklich nervig, aber deine einzige Option ist die Verwendung von Javascript, um ein SVG auf Edge zu animieren.

Sie können den Status der Funktion auf der Microsoft Edge-Website verfolgen.

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