为什么 (0,y) 坐标处的笔画宽度总是较细，如何解决这个问题？

Question

如果你比较

<SVG>
  <PATH d="M 0 0  L 0 50" stroke="#FFFFFF" />
</SVG>

和

<SVG>
  <PATH d="M 1 0  L 1 50" stroke="#FFFFFF" />
</SVG>

您会注意到，在第一种情况下笔划较细，而在第二种情况下则笔划适当。这是为什么？（在 Firefox 中看起来是这样。）（如果默认背景为白色，您可能需要更改描边颜色。）

Answer 1

如果您在 SVG 容器的边缘绘制 SVG 线条路径，那么您将只能看到线条的 1/2，因为另外 1/2 位于容器外部并被剪裁。

提示：如果添加描边宽度，您可以更清楚地看到这一点

<PATH d="M 0 0  L 0 50" stroke="orange" stroke-width="6" />

并向您的 svg 添加轮廓或边框：

svg {
  outline: 1px solid red;
}   

如果 SVG 未指定 viewBox、宽度或高度，则默认情况下 SVG 将从 0,0 到 300,150。0,0 到 300,150 框之外的任何内容都将被剪掉。

从 0,0 开始的线位于容器的边缘，因此被剪成两半。从 1,0 开始的行完全在容器中。

如果您想查看整行，甚至是容器外部的部分，请添加以下 css：

svg {
  overflow: visible;
} 

<PATH d="M 0 0  L 0 50" stroke="orange" stroke-width="6" />