The <circle> SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
<circle>
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. Value type: <length>|<percentage> ; Default value:
0; Animatable: yes -
cy -
The y-axis coordinate of the center of the circle. Value type: <length>|<percentage> ; Default value:
0; Animatable: yes -
r -
The radius of the circle. A value lower or equal to zero disables rendering of the circle. Value type: <length>|<percentage> ; Default value:
0; Animatable: yes -
pathLength -
The total length for the circle's circumference, in user units. Value type: <number> ; Default value: none; Animatable: yes
Note: Starting with SVG2, cx, cy, and r are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
Global attributes
- Core Attributes
- Styling Attributes
class,style- Conditional Processing Attributes
-
Most notably:
requiredExtensions,systemLanguage - Event Attributes
- Presentation Attributes
-
Most notably:
clip-path,clip-rule,color,color-interpolation,color-rendering,cursor,display,fill,fill-opacity,fill-rule,filter,mask,opacity,pointer-events,shape-rendering,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,transform,vector-effect,visibility - ARIA Attributes
-
aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,aria-colspan,aria-controls,aria-current,aria-describedby,aria-details,aria-disabled,aria-dropeffect,aria-errormessage,aria-expanded,aria-flowto,aria-grabbed,aria-haspopup,aria-hidden,aria-invalid,aria-keyshortcuts,aria-label,aria-labelledby,aria-level,aria-live,aria-modal,aria-multiline,aria-multiselectable,aria-orientation,aria-owns,aria-placeholder,aria-posinset,aria-pressed,aria-readonly,aria-relevant,aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-selected,aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext,role
Usage notes
| Categories | Basic shape element, Graphics element, Shape element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # CircleElement |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
circle |
1 | 12 | 1.5 | 9 | 8 | 3.1 | 3 | Yes | 4 | Yes | 2 | Yes |
cx |
Yes | 12 | Yes | 9 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
cy |
Yes | 12 | Yes | 9 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
r |
Yes | 12 | Yes | 9 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
See also
- Other SVG basic shapes:
<ellipse>,<line>,<polygon>,<polyline>,<rect>
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle