Summary -
In this topic, we described about the SVG Drawing Pentagon with detailed example.
<svg> with <polygon> element used to draw a pentagon. To draw Pentagon, we need to provide the x,y coordinates for 5 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 pentagon. |
stroke | Specifies the pentagon stroke color. |
stroke-width | Specifies the pentagon stroke width. |
Example -
Below example describes how to draw pentagon.
<!DOCTYPE html>
<html>
<head>
<title>SVG Pentagon </title>
</head>
<body>
<svg height="220" width="400">
<polygon points="60 13,110 48,92 110,30 110,13 48"
stroke="violet"
fill="orange" stroke-width="5" />
</svg>
</body>
</html>