SVG Polygon
SVG Polygon （SVG多边形）
Description of the <polygon> element
Description of the <polygon> element
The SVG <polygon> element creates a graphic containing at least three sides.
Polygons consist of straight lines, which are connected up, and its shape is “closed”. （多边形由连接起来的直线组成，其形状是“封闭的”。）
Example of the SVG <polygon> element with three sides:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
In this example the points attribute specifies the x and y coordinates for each corner of our polygon. （在此示例中， points属性指定多边形每个角的x和y坐标。）
Example of the SVG <polygon> element with four sides:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Example of the SVG <polygon> element for creating a star:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't supported by your browser.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Attributes
Attributes （属性）
| Attribute | Description |
|---|---|
| points | This attribute specifies the list of points (pairs of x,y absolute coordinates) that are required for drawing the polygon. |
| pathLength | This attribute specifies the total length for the path, in user units. |
The SVG <polygon> element also supports the Global Attributes and Event Attributes.