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

Question

我有一个复选标记 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>

有什么想法吗？

感谢任何帮助。

Answer 1

经过一些研究，我发现在 Edge 中，在处理描边-dashoffset 和描边-dasharray 时必须更加具体，因此您必须输入“0px”而不是“0”；

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

IE 不支持 SVG 的 CSS 动画，而且永远不会支持