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中，在处理stroke-dashoffset和stroke-dasharray时必须更加具体，因此必须将“ 0px”替换为“ 0”；

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

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