Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Working with tag in HTML5
The <polygon> tag in HTML5 SVG allows you to create multi-sided shapes by defining a series of connected straight lines. It's perfect for creating geometric shapes like triangles, stars, and other polygonal figures.
Syntax
<svg>
<polygon points="x1,y1 x2,y2 x3,y3 ..." fill="color" stroke="color" />
</svg>
Key Attributes
The points attribute defines the polygon's vertices as coordinate pairs (x,y), separated by spaces or commas. Other common attributes include fill, stroke, and stroke-width.
Example: Creating an SVG Star
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG Polygon</title>
<meta charset="utf-8" />
</head>
<body>
<h2 align="center">HTML5 SVG Star</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/>
</svg>
</body>
</html>
Example: Triangle and Pentagon
<svg width="300" height="200">
<!-- Triangle -->
<polygon points="50,20 20,80 80,80" fill="blue" stroke="black" stroke-width="2"/>
<!-- Pentagon -->
<polygon points="200,30 230,70 210,110 170,110 150,70"
fill="green" stroke="darkgreen" stroke-width="3"/>
</svg>
How Polygon Points Work
Common Use Cases
Polygons are commonly used for creating geometric shapes, icons, charts, and decorative elements. They automatically close the path by connecting the last point back to the first point.
Conclusion
The <polygon> tag provides a simple way to create multi-sided shapes in SVG. Define your vertices with the points attribute and style with fill and stroke properties for effective geometric graphics.
326 Views
