如何使用 svg 创建多边形？答案

【问题标题】：How to create a polygon using svg?如何使用 svg 创建多边形？
【发布时间】：2019-10-14 17:26:09
【问题描述】：

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

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

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'

图片：

【问题讨论】：

我不清楚你卡在哪里了。您是否熟悉笛卡尔坐标系（X 和 Y 轴等）。还是只是points属性的格式你看不懂？
使用points = 'x1,y1 x2,y2 x3,y3 x4,y4'
@enxaneta 可能该符号的要点是 x4 == x3 和 x2 == x1
@AryaStark 我已经制作了一个有效的 sn-p，添加了黑色背景以便您可以看到您的白色多边形

标签： svg polygon

【解决方案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>

【讨论】：