SVG 多边形

SVG : 创建多边形形状

元素

<polygon> 元素用于创建由三条或更多直线段组成的闭合图形。你需要定义多边形的顶点（corners），浏览器会自动将最后一个顶点连接回第一个顶点以闭合图形。

‘Polygon’ 一词来源于希腊语：‘Poly’（多个）和 ‘gon’（角）。

示例 1: 一个简单的三角形

创建一个三边多边形（一个三角形）：

一个带有紫色边框的浅绿色三角形。

SVG 代码：

<svg width="300" height="250">
  <polygon points="200,10 250,190 160,210"
           style="fill:lime; stroke:purple; stroke-width:1;" />
</svg>

代码解释：

• points: 这个属性定义了多边形每个顶点的坐标。它是一个数字列表，被解释为 x,y 对：“x1,y1 x2,y2 x3,y3 …”。逗号或空格都可以用作坐标值之间的分隔符，通常在坐标对之间使用空格。

示例 2: 一个四边形多边形

创建一个四边多边形：

一个带有紫色边框的、不规则的浅绿色四边形。

SVG 代码：

<svg width="350" height="300">
  <polygon points="220,10 300,210 170,250 123,234"
           style="fill:lime; stroke:purple; stroke-width:1;" />
</svg>

示例 3: 使用 ‘nonzero’ 填充规则创建一个星形

<polygon> 元素可以通过定义相交的路径来创建更复杂的形状，例如星形。

一个带有粗紫色边框的浅绿色五角星。由于采用了 ‘nonzero’ 填充规则，星形中心区域被填充。

SVG 代码：

<svg width="250" height="250">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
           style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
</svg>

代码解释：

• fill-rule: 这个 CSS 属性决定了自相交图形的内部如何填充。nonzero（默认值）基于缠绕数填充区域（如果从一个点到无穷的射线跨越路径的净次数非零，则该点在内部）。

示例 4: 使用 ‘evenodd’ 填充规则创建一个星形

将 fill-rule 更改为 evenodd：

一个带有粗紫色边框的浅绿色五角星轮廓。由于采用了 ‘evenodd’ 填充规则，星形中心区域是中空的（未填充）。

SVG 代码：

<svg width="250" height="250">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
           style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;" />
</svg>

代码解释：

• fill-rule: evenodd;: 使用 evenodd 时，如果从一个点到无穷的射线跨越路径的次数为奇数，则该点在内部；如果为偶数，则在外部。这通常会导致像这个星形这样的自相交形状出现中空区域。

实际应用：

Polygons 用于创建自定义几何图形、图标、图表组件（如近似的饼图扇区）以及任何需要直线闭合路径的图形。对于带有曲线或开放路径的形状，<path> 元素更适合。

记住，如果多边形传达了有意义的信息，请提供可访问性描述（例如，使用 <title> 和 <desc>）。