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. 将 overflow="visible" 添加到您的 SVG，以便绘制 SVG 之外的形状部分，而不是剪裁(按照 @enxaneta 的建议)