The <circle>
SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
Example
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" />
</svg>
Attributes
cx
The x-axis coordinate of the center of the circle.
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" />
<circle cx="85" cy="25" r="25" />
<circle cx="150" cy="25" r="25" />
</svg>
cy
The y-axis coordinate of the center of the circle.
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" />
<circle cx="85" cy="40" r="25" />
<circle cx="150" cy="60" r="25" />
</svg>
r
The width of the rect.
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="5" />
<circle cx="85" cy="25" r="15" />
<circle cx="150" cy="25" r="20" />
</svg>
fill
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#ff0000" />
<circle cx="85" cy="25" r="25" fill="#00ff00"/>
<circle cx="150" cy="25" r="25" fill="#0000ff"/>
</svg>
fill-opacity
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<rect x="0" width="50" height="50" fill="#ff0000" fill-opacity="0.1"/>
<rect x="60" width="50" height="50" fill="#ff0000" fill-opacity="0.5"/>
<rect x="120" width="50" height="50" fill="#ff0000" fill-opacity="1"/>
</svg>
stroke
The stroke
attribute is a presentation attribute defining the color used to paint the outline of the shape;
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<rect x="0" width="50" height="50" fill="#ff0000" stroke="#000000"/>
<rect x="60" width="50" height="50" fill="#ff0000" stroke="#00ff00"/>
<rect x="120" width="50" height="50" fill="#ff0000" stroke="#0000ff"/>
</svg>
stroke-width
The stroke-width
attribute is a presentation attribute defining the width of the stroke to be applied to the shape.
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#ff0000" stroke="#000000" stroke-width="2"/>
<circle cx="85" cy="25" r="25" fill="#ff0000" stroke="#00ff00" stroke-width="4"/>
<circle cx="150" cy="25" r="25" fill="#ff0000" stroke="#0000ff" stroke-width="6"/>
</svg>
stroke-opacity
The stroke-opacity
attribute is a presentation attribute defining the opacity applied to the stroke of a shape.
<svg viewBox="0 0 220 100" width="220" height="110" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="25" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="0.1"/>
<circle cx="85" cy="25" r="25" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="0.5"/>
<circle cx="150" cy="25" r="25" fill="#ff0000" stroke="#000000" stroke-width="6" stroke-opacity="1"/>
</svg>