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/

SVG绘制不同厚度的线条

1 个答案: