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/