SVG <circle>
SVG Circle - <circle>
The <circle> element is used to create a circle.
The <circle> element has three basic attributes to position and set the
size of the circle:
| Attribute | Description |
|---|---|
| r | Required. The radius of the circle |
| cx | The x-axis center of the circle. Default is 0 |
| cy | The y-axis center of the circle. Default is 0 |
An SVG Circle
The following example creates a circle:
Here is the SVG code:
Example
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" />
</svg>
Try it Yourself »
Code explanation:
- The
rattribute defines the radius of the circle - The
cxandcyattributes define the x- and y-axes center of the circle. If they are omitted, the circle's center is set to (0,0) - The
fillattribute defines the color of the circle
An SVG Circle with Border
The following example creates a circle with border:
Here is the SVG code:
Example
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red"
stroke="green" stroke-width="3" />
</svg>
Try it Yourself »
Code explanation:
- The
strokeattribute defines the color of the border around the circle - The
stroke-widthattribute defines the width of the border around the circle
An SVG Circle with Opacity
The following example creates a circle with opacity:
Here is the SVG code:
Example
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red"
stroke="green" stroke-width="3" opacity="0.5" />
</svg>
Try it Yourself »
Code explanation:
- The
opacityattribute defines the opacity of the circle
