SVG Polygon Arrow，顶部是否有细线？

Question

我尝试使用polygon标签创建一个简单的箭头作为SVG。结果看起来很不错，但它只是我还是顶部的线看起来有点薄？可能是什么原因？

以下是代码：

"Proj"

这是生成的SVG的图片：

Answer 1

正如罗伯特（Robert）所说，该元素的第一行位于SVG画布之外的一半

我在您的代码中添加了一个红色边框，该边框显示了SVG画布的边框

<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>

有两种解决方案：

1. 绘制一个新的y坐标等于或大于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>

1. 或添加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>

Answer 2

顶部的线在y坐标0处。

该行的笔画宽度为2，因此该行在y方向上从-1延伸到1（笔画宽度的1/2是y坐标的两侧）。

您的svg视口从0,0延伸到550,500.您无法看到视口外部的一半线，因此它看起来更薄。