带有css的Svg旋转动画不适用于ie或edge答案

【问题标题】：Svg rotation animation with css not working on ie or edge带有css的Svg旋转动画不适用于ie或edge
【发布时间】：2016-08-11 08:07:40
【问题描述】：

我正在制作 svg 上的微调器动画。不幸的是，我在使用 ie 或 edge 时遇到了问题。支持所有其他浏览器。

这里是代码笔：http://codepen.io/skjnldsv/pen/oxyjoQ

您可以看到不透明动画有效，但旋转无效。我是否缺少某种前缀，或者 ie/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>

【问题讨论】：

标签： css internet-explorer animation svg microsoft-edge

【解决方案1】：

我自己也遇到了同样的问题。在挖掘之后，我发现 Edge 目前不支持 SVG 中的 CSS 转换。这真的很烦人，但你唯一的选择是使用 Javascript 在 Edge 上为 SVG 制作动画。

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

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

【讨论】：