SVG 多边形箭头，顶部的细线？

Question

我尝试使用多边形标记创建一个简单的 SVG 箭头。结果看起来很不错，但是是我自己还是顶部的线看起来有点细？这可能是什么原因？

代码如下：

<svg height="550" width="500">
   <polygon points="25 0, 25 0, 150 0, 150 50, 25 50, 0 25" fill="white" stroke-width="2" stroke="black"/>
</svg>

这是生成的 SVG 的图片：

Answer 1

顶部的线在 y 坐标 0。

线条的笔画宽度为 2，因此线条在 y 方向上从 -1 延伸到 1（1/2 笔画宽度在 y 坐标的任一侧）。

您的 svg 视口从 0, 0 延伸到 550, 500。您看不到位于视口之外的那一半线，因此它看起来更细。

Answer 2

正如 Robert 评论的那样，元素的顶行在 SVG 之外的一半处 canvas

我在您的代码中添加了红色边框以显示 SVG 的边框 canvas

<svg height="550" width="500"  style="border:1px solid red;">
   <polygon points="25 0, 25 0, 150 0, 150 50, 25 50, 0 25" fill="white" stroke-width="2" stroke="black"/>
</svg>

有两种解决方法：

绘制一个 y-coordinate 等于或大于 1 像素的新元素在下面的示例中，我只是在多边形的所有节点处添加 1px 坐标

<svg height="550" width="500"  style="border:1px solid red;">
   <polygon points="25 1, 25 1, 150 1, 150 51, 25 51, 0 26" fill="white" stroke-width="2" stroke="black"/>
</svg>

或添加ViewBox

<svg height="550" width="500" viewBox="0 49 550 500" style="border:1px solid red;">
   <polygon points="25 0, 25 0, 150 0, 150 50, 25 50, 0 25" fill="white" stroke-width="2" stroke="black"/>
</svg>

SVG 多边形箭头，顶部的细线？

SVG Polygon Arrow, thin line at top?

html

svg

polygon