Svg rotation animation with css not working on this or that edge

Question

I am working on spinner animation on svg. Unfortunately, I have problems with you or the region. Every other browser is supported.

Here is the code: http://codepen.io/skjnldsv/pen/oxyjoQ

As you can see, the opacity animation works, but does not rotate. Is there some kind of prefix that I am missing, or is svg support broken in ie / edge?

thanks

here are two svg, the first of which does not work, the second is fine.

<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

I had the same problem. After digging, I found out that CSS transformations in SVG are not supported by Edge at the moment. It's really annoying, but your only option is to use Javascript to animate SVG on Edge.

You can monitor the status of a feature on the Microsoft Edge website.

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