时间戳

首页 > 解决方案 > 如何创建具有统一笔触宽度的 SVG 多边形？

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

问题描述

我正在尝试创建一个 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>

标签： htmlcsssvggeometry

解决方案

笔划确实是4单位宽度，但它被视图框剪裁了。请记住，笔画沿其路径居中，而不是与一侧对齐...

...因此，如果您有一个视图框，并且您有一条从to0 0 100 100运行的线或路径，并且您给它一个笔划，那么只有该笔划的宽度是可见的，因为另一半将存在于和之间。(0,0)(0,100)7px3.5pxx = -3.5pxx = 0

如果您增加视图框的大小和/或移动polygon它，使其点距视图框的一侧至少4“单位”，则完整路径变得可见：

（它是4“单位”，而不是4px因为 SVG 中的无单位宽度（如stroke-width: 4;）被假定为以当前转换集的视图框为单位，如果相关的话- 所以您可能希望向stroke-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>

推荐阅读