Question

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

以下是codepen：http://codepen.io/skjnldsv/pen/oxyjoQ

正如您所看到的，不透明度动画有效，但不是旋转。是否有某种前缀我缺少，或者svg支持在ie / edge中被破坏了？

由于

这是两个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/

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

1 个答案: