Summary -
In this topic, we described about the SVG Drawing Hexagon with detailed example.
<svg> with <polygon> element used to draw a hexagon. To draw hexagon, we need to provide the x,y coordinates for 6 angles.
Attribute | Use |
---|---|
points | Specifies to establish the x and y coordinates. For Example- <polygon points = "30,20 290,30, 180,60"></polygon> |
fill | Specifies the environment color of hexagon. |
stroke | Specifies the hexagon stroke color. |
stroke-width | Specifies the hexagon stroke width. |
Example -
Below example describes how to draw hexagon.
<!DOCTYPE html>
<html>
<head>
<title>SVG Hexagon </title>
</head>
<body>
<svg height="110" width="300">
<polygon points="50 3,100 28,100 75, 50 100,3 75,3 25"
stroke="black"
fill="yellow"stroke-width="5" />
</svg>
</body>
</html>