SVG <polygon>
Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".
SVG Polygon - <polygon>
The <polygon> element is used to create a graphic that contains at least
three sides.
Polygons are made of straight lines, and the shape is "closed" (it automatically connects the last point with the first).
The <polygon> element has one basic attribute
that defines the points of the polygon:
| Attribute | Description |
|---|---|
| points | Required. The list of points of the polygon. Each point must contain an x coordinate and a y coordinate |
A Polygon With Three Sides
The following example creates a polygon with three sides:
Here is the SVG code:
Example
<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 150,190 50,190"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Try it Yourself »
Code explanation:
- The
pointsattribute defines the x and y coordinates for each corner of the polygon
A Polygon With Four Sides
The following example creates a polygon with four sides:
Here is the SVG code:
Example
<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Try it Yourself »
A Polygon With Six Sides
The following example creates a polygon with six sides:
Here is the SVG code:
Example
<svg height="280" width="360" xmlns="http://www.w3.org/2000/svg">
<polygon points="150,15 258,77 258,202 150,265 42,202 42,77"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Try it Yourself »
A Polygon Star
Use the <polygon> element to create a star:
Here is the SVG code:
Example
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>
Try it Yourself »
Another Polygon Star
Use the fill-rule attribute to specify the
inside part of a shape:
Here is the SVG code:
Example
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Try it Yourself »
Code explanation:
- The
fill-ruleattribute defines the algorithm to use to specify the inside part of a shape
