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>
</body>
</html>In this example the points attribute specifies the x and y coordinates for each corner of our polygon.
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>
</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>
</body>
</html>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.
Practice Your Knowledge
What is true about SVG polygon as per the content from the provided URL?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.