除了矩形、圆和椭圆，你可能还想画六边形、八边形、五角星或者其他封闭图形。<polygon> 元素可以用来画任意封闭图形，这个图形也可以像前面说的那样填充和绘制轮廓。
使用时需要为 points 属性指定一系列的 x/y 坐标对，并用逗号或者空格分隔。表示坐标的数字个数必须是偶数。指定坐标时不需要在最后指定返回起始坐标，因为图形是封闭的，会自动回到起始坐标。
属性
| 属性 | 说明 |
|---|---|
points |
定义多边形每个角的 x 和 y 坐标，表示坐标的数字个数必须是偶数，并用逗号或者空格分隔 |
fill |
属于 style 属性，图形内部会使用 fill 属性代表的颜色进行填充，如果没有指定 fill 颜色（rgb 值、颜色名或者十六进制值），则会使用黑色填充，也可以指定为 none，即不填充图形内部，保持透明 |
fill-opacity |
属于 style 属性，定义填充颜色透明度（合法的范围是：0 - 1） |
fill-rule |
用于指定使用哪一种短发去判断画布上的某区域是否属于该图形的“内部”（内部区域将被填充），有效值为 nonzero/evenodd/inherit，默认为 nonzero |
stroke |
定义图形边框的颜色 |
stroke-width |
定义图形边框的宽度 |
stroke-opacity |
定义轮廓颜色的透明度（合法的范围是：0 - 1） |
opacity |
定义元素的透明值（合法的范围是：0 - 1） |
示例
<svg width="200px" height="200px" viewBox="0 0 200 200">
<!-- 平行四边形 -->
<polygon points="15,10 55, 10 45, 20 5, 20"
style="fill: red; stroke: black;"/>
<!-- 五角星 -->
<polygon
points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5
42.3,60.1 35,55 27.7,60.1 30.3,51.5
23.1,46.1 32.1,46.1"
style="fill: #ccffcc; stroke: green;"/>
<!-- 不规则图形 -->
<polygon
points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95"
style="fill: yellow; fill-opacity: 0.5; stroke: black;
stroke-width: 2;"/>
</svg>
效果如下：
