SVG <circle> Draw Circle

<circle> SVG element is a basic shape of SVG, used to create circles, based on a center point and a radius, and can also use stroke and fill properties to draw solid outlines, dashed outlines, and color fills for circles.

SVG <circle> element is used to draw circles. This is a simple example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

This is the image of the running result

The circle is centered at points cx, cy with a radius of r. cx, cy, and r are attributes of the <circle> element.

Circular Outline

You can use the SVG stroke style attribute to set the stroke (outline) of the SVG circle. In the first example on this page, the strokes are set to #006600 deep green. However, you can not only set the line color, but also set more. You can also use stroke-width style attribute sets the line width. Here is an example:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　fill:#00cc00"/></svg>

This is the appearance of the circle after running:

You can also use stroke-The dasharray attribute draws the border in dashes. Here is an example:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　fill:#00cc00"/></svg>

This is the rendered appearance:

You can also remove the border (outline) of the circle and fill it with the fill color only. The example code is as follows:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: none;
　　　　　　　　　　　fill:#00cc00"/></svg>

The effect of a circle without a border after running is as follows:

Circle Fill

The fill style attribute controls the filling method of the circle. By setting the fill attribute to none, you can choose not to fill at all.
Here is an example:

This is the appearance of a circle without fill:

You can use the fill attribute to set the fill color, as described earlier in this article, the example code is as follows:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: #"660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

The appearance of drawing a circle and filling it with color is as follows:

You can also use fill-The opacity style attribute sets the fill to transparent. The following example draws two circles, one of which is partially above the other and is semi-transparent.

<svg　height="80px">
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:　#660000;
　　　　　　　　　　　　　　　　　　　fill:　#cc0000;
　　　　　　　　　　　　></circle>
　　　　<circle　cx="64"　cy="40"　r="24"　style="stroke:　#000099;
　　　　　　　　　　　　　　　　　　　fill:　#0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　　　　　></circle>
</svg>

The running effect is as follows:

Please note that the blue (right) circle is now semi-transparent inside. To make the stroke also semi-transparent, you must use stroke-opacitystyle attribute.