我正在尝试在屏幕上绘制多条线，但由于某种原因，即使我为每个元素指定了相同的粗细，第三条线也比其他线条更粗：
<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>
奇怪的结果
如果我删除前两行，第三行仍然会出现奇怪的粗细问题，我注意到如果我将第三行的 y2 设置为 0，线条粗细会消失，但如果设置了，那么即使它没有旋转，它也会保持粗。我似乎找不到有关此问题的任何信息，这同时发生在 - Chrome 和 Firefox 上。有什么建议吗？谢谢！
这是因为前两行中每行的笔触宽度的一半被切断，因为它们不在视图中（即 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/