HTML SVG笔触边缘变宽

Question

我已经创建了此可缩放的矢量图形。

<svg width="150" height="90" style="stroke: black;">
    <rect width="40" height="90" style="fill:white;"></rect>
    <polygon points="40,0 40,90 150,90 100,45 150,0" style="fill:blue;"/>
</svg>

我的目标是左侧，但结果返回右侧。

如您所见，垂直边缘的笔触比水平边缘的笔触宽。这是svg的缺陷吗？有没有一种方法可以减轻它以实现更一致的冲程。

Answer 1

形状的边缘与SVG的贴合边界重合。绘制描边，使其宽度的一半位于线条的两侧。

所以发生的事情是，顶部，左侧和底部的一半线被截断了，因为它们在SVG之外。

一些解决方案是：

1. 将线在SVG中移动到笔画宽度的一半。
2. 添加一个viewBox，其宽度比您的形状大一半。这将具有缩小形状的效果，以便绘制所有笔画。
3. 在您的SVG中添加overflow="visible"，以便绘制出SVG外部的形状部分，而不对其进行裁剪（如@enxaneta所建议）