Summary -
In this topic, we described about the SVG Drawing Star with detailed example.
<svg> with <polygon> element used to draw a star. To draw star, we need to provide the x,y coordinates for 5 angles. However, we need to provide one value at the first points set and one at the last to draw a star.
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 star. |
stroke | Specifies the star stroke color. |
stroke-width | Specifies the star stroke width. |
Example -
Below example describes how to draw a star.
<!DOCTYPE html>
<html>
<head>
<title>SVG Star</title>
</head>
<body>
<svg height = "140" width="400">
<polygon points = "90,5 30,120 165,50 15,
50 150,120" fill = "brown"/>
</svg>
</body>
</html>