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

如果我刪除了前兩行，第三行還給出了奇怪的厚度問題，我注意到，如果我第三行設置Y2爲0，線條粗細消失，但如果它的設置，那麼它仍然很厚，即使它沒有旋轉。我似乎無法找到關於此問題的任何信息，這種情況發生在Chrome和Firefox上。有什麼建議麼？謝謝！

Answer 1

這是因爲您的前兩行每一行的行程寬度的一半因爲不在視圖中而被切斷（即1/2 px寬度爲< 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/