SVG-Animation funktioniert nicht in Edge oder IE

Question

Ich habe ein Häkchen SVG-Animation, die in Safari, Chrome, Firefox usw. funktioniert, aber nicht in Edge und IE funktioniert (Überraschungsüberraschung).

Es scheint, als ob das SVG vorhanden ist, aber die Striche nicht angezeigt werden.

Soweit ich sagen kann sowohl Edge und IE11 unterstützen, was ich versuche zu tun, und ich habe jedes Präfix verwendet, das ich mir vorstellen kann.

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>

Irgendwelche Ideen?

Jede Hilfe wird geschätzt.

Answer 1

So nach einigen Recherchen fand ich, dass in Edge, müssen Sie genauer sein, wenn es um Strich-Dashoffset und Schlaganfall-dasharray geht, also anstelle von "0" müssen Sie "0px" setzen;

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

IE nicht CSS-Animationen von SVGs unterstützen und wird nie