The <circle>
SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
The <circle>
SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50" /> </svg>
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.
class
, style
Most notably: requiredExtensions
, systemLanguage
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-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
Categories | Basic shape element, Graphics element, Shape element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specification |
---|
Scalable Vector Graphics (SVG) 2 # CircleElement |
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 |
<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