MS Edgeのパスストロークの幅が他のブラウザよりも大きいのはなぜですか？

Question

私は私のアニメーションのためのSVGグリッドを作ってるんだ、と、私はマイクロソフトのエッジでそれを開いて、私のパスは次のように見ている参照してください。 しかし、私は彼らがこのように見える必要があります。

私がありますJSFiddle

そして、私のSVGコード

<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> 
    <path d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" vector-effect="non-scaling-stroke" /> 
    <path d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line stroke-width="1" vector-effect="non-scaling-stroke" /> 
    <path d="M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100" class="third-line" vector-effect="non-scaling-stroke" /> 
</svg> 

Answer 1

あなたはそれがあなたのためにフル助けることができるエッジブラウザのCSSの下に試すことができますがあります。エッジブラウザをチェックインします。

エッジはベクトル効果=「非スケーリングストローク」をサポートしていないためFiddle Demo

@supports (-ms-ime-align:auto) { 
    .page .lines path { 
     stroke-width:0.15px; 
    } 
}