SVG Circle<circle>

The<circle>element in SVG is used to draw circles, and it is one of the common basic shapes in SVG.

Using the<circle>element, you can create circular graphics, and you can control the position, size, and style of the circle by setting attributes.

Basic Syntax

<circle
  cx="x-coordinate"      <!-- 圆心的 x 坐标 -->
  cy="y-coordinate"      <!-- 圆心的 y 坐标 -->
  r="radius"             <!-- 圆的半径 -->
  fill="fill-color"      <!-- 圆的填充颜色 -->
  stroke="stroke-color"  <!-- 圆的描边颜色 -->
  stroke-width="width"   <!-- 圆的描边宽度 -->
/>

Attribute Explanation:

• cxandcyThe attribute defines the coordinates of the center of the circle, i.e., the position of the circle's center point.

• rThe attribute defines the radius of the circle to determine its size.

• fillThe attribute defines the fill color of the circle.

• strokeThe attribute defines the stroke color of the circle.

• stroke-widthThe attribute defines the stroke width of the circle.

The following code draws a circle with a blue fill, black stroke, and a radius of 50 pixels, with the center at (100, 100).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

Example

Below is the SVG code:

Click to view:View SVG file。

Code Explanation:

• The cx and cy attributes define the x and y coordinates of the circle's center. If cx and cy are omitted, the circle's center is set to (0, 0).
• The r attribute defines the radius of the circle.