SVG动画在Edge或IE中不起作用

Posted 2021-03-28

我有一个复选标记SVG动画，可以在Safari，Chrome，Firefox等中运行，但在Edge和IE中不起作用（惊喜）。

似乎SVG在那里，但笔画没有显示。

据我所知，Edge和IE11支持我正在尝试做的事情，并且我已经使用了我能想到的每个前缀。

CSS / html：

.checkmark {
    position: relative;
    left: 50px;
    z-index: 1;
    opacity: 1;
    width: 22px;
    border-radius: 50%;
    display: inline;
    stroke-width: 6;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: -4px -15px;
    -webkit-box-shadow: inset 0px 0px 0px #fff;
            box-shadow: inset 0px 0px 0px #fff;
    -webkit-animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: #fff;
    fill: none;
    -webkit-animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
            animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
}

.checkmark__check {
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    -webkit-animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
            animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
}

@-webkit-keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes scale {
    0%, 100% {
        -webkit-transform: none;
                transform: none;
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
                transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes scale {
    0%, 100% {
        -webkit-transform: none;
                transform: none;
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
                transform: scale3d(1.1, 1.1, 1);
    }
}

@-webkit-keyframes fill {
    100% {
        -webkit-box-shadow: inset 0px 0px 0px 30px #B0D056;
                box-shadow: inset 0px 0px 0px 30px #B0D056;
    }
}

@keyframes fill {
    100% {
        -webkit-box-shadow: inset 0px 0px 0px 30px #B0D056;
                box-shadow: inset 0px 0px 0px 30px #B0D056;
    }
}

<svg class="checkmark"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 52 52">
     <circle class="checkmark__circle"
             cx="26"
             cy="26"
             r="25"
             fill="none"/>
     <path class="checkmark__check"
           fill="none"
           d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>

有任何想法吗？

任何帮助表示赞赏。

答案

所以在经过一些研究之后，我发现在Edge中，你必须在处理stroke-dashoffset和stroke-dasharray时更具体，所以代替'0'你必须放'0px';

@keyframes stroke {
    100% {
        stroke-dashoffset: 0px;  /* instead of stroke-dashoffset: 0; */
    }
}

IE不支持SVG的CSS动画，也不会支持