起点与其他点的笔划宽度不同

Question

为什么起点和其他点的笔划宽度不同？

请参考以下代码：

   <svg>
      <polyline points="10 0, 30 0,10 10,30 10" fill="none" stroke-width="2px" stroke="#19af5c"></polyline>
    </svg>

我不想通过为其他点复制折线来实现。即每个点都有不同的polyline/line元素

Answer 1

这是因为在 SVG 中描边是如何完成的。它完成了类似 half-and-half 的事情，也就是说，笔画是从 0 到 1 的一半，另一半是 -1 到 0（如果你明白我的意思的话）所以你会看到更细的笔画。

你可以参考Stroke section in this MDN page明白我的意思。他们是这样说的：

Strokes are drawn centered around the path

如果将点设为 10,1 和 30,1，您会看到相同的笔划宽度。这样做的原因是笔划现在在 Y 轴上介于 0 到 2 之间（笔划的一半在点的顶部，一半在点的底部）。

<svg>
  <polyline points="10 1, 30 1,10 10,30 10" fill="none" stroke-width="2px" stroke="#19af5c"></polyline>
</svg>

Start point have different stroke width than other points