The SVG <circle> element is used to draw circle. The center point and radius are given.
Syntax:
<circle
cx="x-axis co-ordinate"
cy="y-axis co-ordinate"
r="length" >
</circle>
Attributes:
- cx: x-axis co-ordinate of the center.
- cy: y-axis co-ordinate of the center
- r: Radius of the circle.
Example:
html
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< circle cx = "80" cy = "80" r = "50"
stroke = "black"
stroke-width = "2"
fill = "grey" />
</ svg >
</ body >
</ html >
|
Output:
Example: Change the opacity
html
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< circle cx = "80" cy = "80"
r = "50" stroke = "black"
stroke-width = "2"
fill = "grey"
opacity = "0.5" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...