小编Ben*_*rts的帖子

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

我有一个选中标记的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; …
Run Code Online (Sandbox Code Playgroud)

css internet-explorer svg cross-browser microsoft-edge

2
推荐指数
1
解决办法
4726
查看次数