本节我们来学习如何在 SVG 中绘制多边形，多边形就是由三条或三条以上的线段首尾顺次连接所组成的平面图形。
如何绘制多边形
绘制多边形可以使用 SVG 中的 <polygon> 元素，通过元素中的 points 属性确定各个点的位置，和 <polyline> 元素差不多。
示例：
例如绘制一个六边形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="500">
<polygon points="100,30 140,50 140,90 100,110 60,90 60,50" style="fill:#5cabcf; stroke: #e07cc2; stroke-width:3px;"></polygon>
</svg>
</body>
</html>
在浏览器中的演示效果为：
绘制一个五角星
通过控制 points 属性的值，我们可以绘制各种图形，例如下面我们绘制一个五角星。
示例：
五角星看着是挺复杂的，其实我们只需要确定好五角星的五个角的坐标点，根据我们平时画五角星的顺序，然后填充颜色和描边，就能呈现出如下图所示效果啦：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px">
<polygon points="100,20 40,180 180,80 10,80 150,180" style="fill:#5cabcf; stroke: #e07cc2; stroke-width:3px;" ></polygon>
</svg>
</body>
</html>
在浏览器中的演示效果为：