html - 如何创建具有统一笔划宽度的 SVG 多边形？

Question

我正在尝试创建一个 SVG 多边形，其元素周围有边框(或者在本例中为笔划)。这在大多数情况下都有效，但是多边形的剪裁边缘似乎比其他边具有更粗的笔画。有没有办法确保笔画宽度在形状周围均匀。

这是说明问题的图像

左上角和右下角的笔画明显比其他侧面或边缘更粗。

代码基本上是这样的

<svg viewbox="0 0 100 100" height="500" width="500">
  <polygon points="10, 0, 100, 0, 100, 90, 90, 100, 0, 100, 0, 10" style="fill:lime;stroke:purple;stroke-width:4" />
</svg>

Answer 1

笔划确实有 4 单位宽，但它被 View 框剪掉了。请记住，笔画沿着其路径居中，而不是向一侧对齐...

...因此，如果您有一个 0 0 100 100 的 View 框，并且有一条从 (0,0) 到 ( 0,100) 并且您给它一个 7px 的笔画，那么该笔画宽度中只有 3.5px 可见，因为另一半将存在于 之间x = -3.5px 和 x = 0。

如果您增加 View 框的大小和/或移动多边形，使其点距 View 框侧面至少4“单位”，则完整路径变得可见:

(这是 4 “单位”，而不是 4px，因为无单位宽度(如 行程宽度:4;)in SVG are assumed to be in units of the viewbox w.r.t. the current set of transformations, if relevant - 所以您可能需要向 lines-width 属性添加一个显式单位以实现一致的渲染。

<svg viewbox="-5 -5 110 110" height="500" width="500">
  <polygon points="10, 0, 100, 0, 100, 90, 90, 100, 0, 100, 0, 10" style="fill:lime;stroke:purple;stroke-width:4" />
</svg>