This is used to draw a closed shape by connecting multiple straight lines.
Before reading further, read the following articles.
Now let's move forward to understanding SVG polygons.
SVG Polygon
The tag <polygon> is used to draw various polygon shapes by connecting multiple straight lines like polyline, but with the difference that a polyline draws open structures and a polygon draws closed structures.
In other words, it draws graphics or polygons that are closed (all lines are connected to each other) and that should contain at least three sides to be closed.
Note: When we use three coordinates to draw a shape by polyline, it only draws two straight lines depending on the given coordinates but if we draw by a polygon then it automatically adds or connects one additional straight line to close the shape.
Like polyline, it also has the attribute “points” that is the list of points to make up the polygons.
Let's see a few examples to understand it properly.
Example 1
Polygons of a minimum of three sides, four sides and five sides.
- <html>
- <body>
- <svg height="250" width="500">
- <polygon points="20,20 100,180 130,100" style="fill:cyan;stroke:blue;stroke-width:2" />
- <polygon points="130,180 200,140 250,80 230,20" style="fill:pink;stroke:red;stroke-width:2" />
- <polygon points="280,20 300,100 350,120 380,60 450,20" style="fill:#cccc00;stroke:purple;stroke-width:2" />
- </svg>
- </body>
- </html>
Output
![Polygons of minimum]()
Example 2
Polygons with strokes and opacity.
- <html>
- <body>
- <svg height="300" width="600">
- <polygon points="20,50 20,110 60,130 100,110 100,50 60,30" style="fill:yellow;stroke:blue;stroke-width:3; stroke-opacity:0.5" />
- <polygon points="120,50 120,120 150,150 210,150 240,120 240,50 180,20 " style="fill:blue;stroke:red;stroke-width:3; fill-opacity:0.5" />
- <polygon points="260,50 260,130 300,170 360,170 400,130 400,50 360,10 300,10" style="fill:red;stroke:black;stroke-width:3; fill-opacity:0.5 ; stroke-opacity:0.5; stroke-dasharray:10 5" />
- </svg>
- </body>
- </html>
Output
![Polygons]()
Example 3
Star polygon.
- <html>
- <body>
- <svg height="300" width="600">
- <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:grey;stroke:blue;stroke-width:5; stroke-opacity:0.5" />
- <polygon points="220,90 300,90 330,10 360,90 440,90 380,150 410,230 335,190 255,235 285,150 "
- style="fill:lightgreen;stroke:green;stroke-width:3; fill-opacity:0.7; stroke-dasharray:10 3" />
- </svg>
- </body>
- </html>
Output
![Output]()
Example 4
Polygon with fill-rule properties “evenodd” & “nonzero”.
- <html>
- <body>
- <svg height="300" width="600">
- <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:orange;stroke:blue;stroke-width:5; stroke-opacity:0.5; fill-rule:evenodd" />
- <polygon points="250,110 320,10 390,110 320,210" style="fill:lightgreen;stroke:green;stroke-width:3; fill-opacity:0.7; fill-rule:nonzero" />
- <polygon points="280,110 320,50 360,110 320,170" style="fill:white;stroke:green;stroke-width:3; fill-opacity:0.5; fill-rule:nonzero; stroke-dasharray:10 5" />
- </svg>
- </body>
- </html>
Output
![star]()
By applying the preceding property, the crossing area gets unfilled by “evenodd” and the separate area is unfilled by “nonzero”.
Thank you, keep learning and sharing.