Question

我有一个加载动画，在chrome和firefox中运行得很好，但在IE10或边缘根本没用。

这是我的HTML：

<svg viewBox="0 0 120 120" version="1.1">
    <symbol id="s-circle">
        <circle r="10" cx="20" cy="20"></circle>
    </symbol>
    <g>
        <#list 1..9 as i>
           <g class="g-circle">
                 <use href="#s-circle"/>
            </g>  
        </#list>
    </g>
</svg>

这是我的scss：

$max: 9;
$angle: 360/$max;
$size: 160px;
$fill: $grey;

.cart__spinner {
    position: relative;
    overflow: hidden;
    width: 280px;
    height: 280px;
    margin: 50px auto 0;
}

svg {
    height: $size;
    width: $size;
    margin: 0 4em 4em;
    overflow: visible;
}

@function transform($item: 1){
    $base: rotate(#{-$angle*$item}deg) translate(5px, 5px);
    @return $base;
}

.g-circle {
    transform-origin: $size/2 $size/2;

    fill: $fill;
    animation: opacity 1.2s linear infinite;

    @for $item from 1 through $max {
        &:nth-child(#{$max}n + #{$item}) {
            animation-delay: -#{$item/10}s;
            transform: transform($item) scale(.9);
            -ms-transform: transform($item) scale(.9);
        }
    }
}



@keyframes opacity {
    0% {
      fill-opacity: 1;
    }
    100% {
      fill-opacity: 0;
    }
}

@keyframes transform {
    10% {
        transform-origin: 70px 70px;
        transform: scale(.75);
    }
}

在IE10或边缘，页面上只有一个点，而不是动画。有人可以解释为什么会这样。我需要明确添加对IE的支持吗？

由于

Answer 1

我认为我的问题是IE不支持svg上的动画。

加载无法在Edge中运行的动画

1 个答案: