Firefox Tomorrow

svg element

<circle>

View on MDN ↗

The <circle> SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.

Usage context

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.

DOM Interface

This element implements the SVGCircleElement interface.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also