Microsoft Edge中的SVG动画兼容性

Question

因此，我一直在尝试使svg动画与Microsoft Edge兼容，但是还没有实现。到目前为止，动画在Chrome和Firefox上都能流畅运行。

有人建议我在“ stroke-dashoffset”中添加“ px”，但它不起作用。任何帮助或建议，我们将不胜感激。

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>

Answer 1

问题与.st5类样式有关。尝试添加“ stroke-linecap：round; stroke-linejoin：round;”此类中的样式。

代码如下：

.st5 {
    fill: none;
    stroke: #c5c5c5;
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

这样的结果（使用Microsoft Edge 44）：