Edge 또는 IE에서 SVG 애니메이션이 작동하지 않습니다

Question

Safari, Chrome, Firefox 등에서 작동하는 체크 표시 SVG 애니메이션이 있지만 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에서 스트로크 대시 오프셋 및 스트로크 대시 어레이를 처리 할 때 '0'대신 '0px'를 입력해야합니다.

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

IE는 SVGs의 CSS 애니메이션을 지원하고 결코 내가 caniuse를 사용하고 여기에 최근의 가장자리 패치는이에 대한 지원을 포함하는 것이 다른 곳에서 본