svg旋转动画,css不在ie或edge上工作

Question

我正在制作一个svg上的微调器动画.不幸的是,我遇到了ie或edge的问题.支持所有其他浏览器.

这是codepen:http://codepen.io/skjnldsv/pen/oxyjoQ

如您所见,不透明度动画可以工作,但不能旋转.是否有某种前缀我缺少,或者是在/ edge中svg支持被破坏了？

谢谢

这是两个svg,第一个不工作,第二个是好的.

<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

我自己也遇到了同样的问题。经过深入研究，我发现 Edge 目前不支持 SVG 中的 CSS 转换。这确实很烦人，但您唯一的选择是使用 Javascript 在 Edge 上为 SVG 制作动画。

您可以在 Microsoft Edge 站点上关注该功能的状态。

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