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

【问题标题】：SVG animation is not working in Edge or IESVG 动画在 Edge 或 IE 中不起作用
【发布时间】：2018-06-04 12:10:21
【问题描述】：

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

有什么想法吗？

感谢任何帮助。

【问题讨论】：

我使用了 caniuse 并在此处的其他地方看到最近的 Edge 补丁包含对此的支持。老实说，我只是把 IE 扔在这里看看是否有人有一个简单的解决方法。

标签： css internet-explorer svg cross-browser microsoft-edge

【解决方案1】：

所以经过一些研究，我发现在 Edge 中，在处理 stroke-dashoffset 和 stroke-dasharray 时必须更具体，所以你必须输入 '0px' 而不是 '0'；

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

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

【讨论】：

我也有同样的问题，如果你有任何答案请评论。