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

【问题标题】：Start point have different stroke width than other points起点的笔划宽度与其他点不同
【发布时间】：2017-04-23 07:04:00
【问题描述】：

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

请参考以下代码：

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

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

【问题讨论】：

【解决方案1】：

这是因为 SVG 中的笔画是如何完成的。它是用对半做的，也就是说，笔划是从 0 到 1 的一半，另一半是 -1 到 0（如果你明白我的意思的话），所以你会看到更细的笔划。

您可以参考Stroke section in this MDN page 了解我的意思。他们是这样说的：

以路径为中心绘制笔画

如果您将点设为 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>

【讨论】：