Итак, я пытался сделать мою SVG-анимацию совместимой с Microsoft Edge, но нигде не получил.Пока что анимация работает плавно на Chrome и Firefox.
Кто-то предложил мне добавить «px» в stroke-dashoffset, но он не работает.Любая помощь или предложения с благодарностью.
SVG Анимация: https://codepen.io/seungryul93/pen/zVKmMQ
<svg version="1.1" id="preloader-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.8 54" style="enable-background:new 0 0 106.8 54;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
.st1{fill:none;stroke:#c5c5c5;stroke-width:12.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{clip-path:url(#SVGID_4_);}
.st3{fill:none;stroke:#4960b4;stroke-width:12.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st4{clip-path:url(#SVGID_6_);}
.st5{fill:none;stroke:#c5c5c5;stroke-width:14;stroke-miterlimit:10;}
.st6{clip-path:url(#SVGID_8_);}
.st7{fill:none;stroke:#4960b4;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#preloader-svg {
display:block;
max-width: 20em;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
@keyframes offset_one {
24% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
.sub_one polyline,
.sub_two polyline {
stroke-dasharray: 140;
stroke-dashoffset: 140;
animation: offset_one 5s linear infinite;
}
@keyframes offset_two {
12% {
stroke-dashoffset: 150;
}
42% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
.sub_four polyline,
.sub_three polyline {
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: offset_two 5s linear infinite;
}
@keyframes fade_out {
80% {
opacity: 1;
}
95% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.feat {
animation: fade_out 5s linear infinite;
}
</style>
<g class="feat">
<g>
<g>
<defs>
<path id="SVGID_1_" d="M90.5,22.3H42.9l2.8-3.3l5.2-6.1V19h11.7V0H45.8L0,53.8h16.1L32.9,34h56.9c2.1,0,3.8,1.7,3.8,3.8c0,0,0,0,0,0 l0,0c0,2.4-2,4.4-4.4,4.4l0,0l0,0c-2.4,0-4.4-2-4.4-4.4v0v-1h-1.5H71.8v0.6c0,9.1,7.4,16.6,16.6,16.6h2.5 c8.7,0,15.8-7.1,15.8-15.8c0-0.3,0-0.5,0-0.8C106.3,28.9,99,22.3,90.5,22.3z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<g class="st0 sub_one">
<polyline class="st1" points="3.4,59.3 51.3,2.8 57.1,2.8 57,55 "/>
</g>
</g>
<g>
<g>
<defs>
<polygon id="SVGID_3_" points="50.9,54 62.6,54 62.6,36.8 50.9,36.8 "/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
</g>
<g class="st2 sub_two">
<polyline class="st3" points="3.4,59.3 51.3,2.8 57.1,2.8 57,55 "/>
</g>
</g>
<g>
<g>
<defs>
<path id="SVGID_5_" d="M90.5,22.3H42.9l2.8-3.3l5.2-6.1V19h11.7V0H45.8L0,53.8h16.1L32.9,34h56.9c2.1,0,3.8,1.7,3.8,3.8c0,0,0,0,0,0 l0,0c0,2.4-2,4.4-4.4,4.4l0,0l0,0c-2.4,0-4.4-2-4.4-4.4v0v-1h-1.5H71.8v0.6c0,9.1,7.4,16.6,16.6,16.6h2.5 c8.7,0,15.8-7.1,15.8-15.8c0-0.3,0-0.5,0-0.8C106.3,28.9,99,22.3,90.5,22.3z"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
</g>
<g class="st4 sub_three">
<polyline class="st5" points="30.7,28.2 86.6,28.2 93.8,28.8 97.2,30.9 99.8,34.1 100.4,39.1 98.7,43.7 96.7,47 94.9,47.4 90.9,48
85.9,47.7 82.3,45.8 79.5,43.5 78.1,38.3 77.8,34.7 77.8,24.5 77.8,-0.3 "/>
</g>
</g>
<g>
<g>
<defs>
<rect id="SVGID_7_" x="71.8" y="0" width="11.5" height="19"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
</g>
<g class="st6 sub_four">
<polyline class="st7" points="35.3,28.2 86.6,28.2 93.8,28.8 97.2,30.9 99.8,34.1 100.4,39.1 98.7,43.7 96.7,47 94.9,47.4 90.9,48
85.9,47.7 82.3,45.8 79.5,43.5 78.1,38.3 77.8,34.7 77.8,24.5 77.8,-0.3 "/>
</g>
</g>
</g>
</svg>