SVG Circle Element
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:
Please Login to comment...