如何使用svg创建多边形？

Question

我要创建一个如下图所示的多边形。

我遇到了以下多边形，但不确定如何使它像图片中那样。

html,
body,
svg {
  height: 100%;
  background-color: #000;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon fill="white" points="0,100 200,0 300,100"/>
</svg>

但是问题是，我想使顶线平行于底线。即

还请说明这些点的工作原理

points = 'x1 y1, x1 y2, x3 y3, x3,y4'

图片：

Answer 1

来自MDN：

  

对于<polygon>，points定义了一个点列表，每个点代表要绘制的形状的顶点。每个点由用户坐标系中的X和Y坐标定义

因此，您需要points="x1,y1 x2,y2 x3,y3 x4,y4"，但您有x2 == x1和x4 == x3，因此实际上是points="x1,y1 x1,y2 x3,y3 x3,y4"

您的svg也错过了stroke="black"来在白色多边形上绘制黑色边框，而viewBox可能具有更好的坐标。

下面的工作示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none">
    <polygon fill="white" stroke="black" points="0,0 0,100 100,150 100,50"/>
</svg>