Question

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

好像SVG在那里，但笔画没有显示。

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

CSS / HTML：

＆＃13;

.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;
    }
}

＆＃13;

<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>

＆＃13;

有什么想法吗？

感谢任何帮助。

Answer 1

经过一些研究后我发现在Edge中，你必须更加具体地处理stroke-dashoffset和stroke-dasharray，而不是＆＃39; 0＆＃39;你必须把＆＃39; 0px＆＃39 ;;

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

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

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

1 个答案: