Svg döndürme animasyonu css ile çalışmayan örn. Kenar veya kenar

Question

Bir svg üzerinde bir döndürücü animasyonu üzerinde çalışıyorum. Maalesef, ie veya edge ile sorun yaşıyorum. Diğer her tarayıcı desteklenmektedir. http://codepen.io/skjnldsv/pen/oxyjoQ

Eğer donukluk animasyon çalışmalarını görebileceğiniz gibi, ancak döndürme: Burada

codepen olduğunu. Eksik bir önek var mı, yoksa svg desteği, yani/edge'de mi bozuk?

Teşekkür burada

çalışmıyor iki svg, ilki, ikincisi tamam.

<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

Sadece aynı sorunu kendim yaşadım. Etrafta kazandıktan sonra, SVG'lerde CSS dönüşümlerinin şu anda Edge tarafından desteklenmediğini öğrendim. Gerçekten can sıkıcı ama tek seçeneğiniz Edge üzerinde bir SVG'yi canlandırmak için Javascript kullanmaktır.

Microsoft Edge sitesindeki özelliğin durumunu takip edebilirsiniz.

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