Description of the <circle> element
The SVG <circle> element creates circles, based on a center point and a radius. The coordinates of the circle’s center are specified by the cx and cy attributes. And the radius of the circle is specified by the r attribute.
Example of the SVG <circle> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Let’s explain the code above:
- The cx and cy attributes specify the x and y coordinates of the circle’s center. In the cases where the cx and cy attributes are omitted, the center of the circle is set to (0,0).
- The r attribute is used to specify the radius of the circle.
Attributes
The SVG <circle> element also supports the Global Attributes and Event Attributes.
| Attribute | Description |
|---|---|
| cx | The x-axis coordinate of the circle’s center. |
| cy | The y-axis coordinate of the circle’s center. |
| r | The radius of the circle. A value that is lower or equal to zero will disable the rendering of the circle. |
| pathlength | This attribute specifies the total length for the path, in user units. |