SVGは、異なる厚さ

Question

私は、画面上に複数の線を描画しようとしている

で線を描画するが、何らかの理由で三行目は、私は、各要素に対して同一の厚さを指定しているにもかかわらず、他の部分よりも厚く描かれます：

<svg height="210" width="500" style="margin-left:100px;margin-top:100px;"> 
    <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(50, 50, 50);stroke-width:1" /> 
    <line x1="0" y1="0" x2="0" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> 
    <line x1="0" y1="200" x2="200" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> 
</svg> 

The weird result

私は最初の2行を削除した場合、3行目は、まだ変な厚さの問題を与え、私は、私は三行を0にY2を設定した場合、線の太さが消えていることに気づいたが、それが設定されています場合には回転していなくても、それは厚いままです。私はこの問題に関する情報を見つけることができないようです。これはChromeとFirefoxの両方で発生します。助言がありますか？ありがとう！

Answer 1

最初の2行の線の幅の半分が、ビューにないため（1/2ピクセル幅が<）0になるためです。あなたは、わずかに画像を調整することで、これは固定見ることができます：

<svg height="210" width="500" style="margin-left:100px;margin-top:100px;"> <line x1="0" y1="1" x2="200" y2="1" style="stroke:rgb(50, 50, 50);stroke-width:1" /> <line x1="1" y1="0" x2="1" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> <line x1="0" y1="200" x2="200" y2="200" style="stroke:rgb(50, 50, 50);stroke-width:1" /> </svg>

https://jsfiddle.net/uax2zj7g/