SVGCircleElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The SVGCircleElement interface is an interface for the <circle> element.

Instance properties

This interface also inherits properties from its parent, SVGGeometryElement.

SVGCircleElement.cx Read only: This property defines the x-coordinate of the center of the <circle> element. It is denoted by the cx attribute of the element.
SVGCircleElement.cy Read only: This property defines the y-coordinate of the center of the <circle> element. It is denoted by the cy attribute of the element.
SVGCircleElement.r Read only: This property defines the radius of the <circle> element. It is denoted by the r of the element.

Instance methods

Inherits methods from its parent interface, SVGGeometryElement.

Examples

Resizing a circle

In this example we draw a circle and randomly increase or decrease its radius when you click it.

HTML

html

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle
    cx="100"
    cy="100"
    r="50"
    fill="gold"
    id="circle"
    onclick="clickCircle();" />
</svg>

JavaScript

function clickCircle() {
  const circle = document.getElementById("circle");
  // Randomly determine if the circle radius will increase or decrease
  const change = Math.random() > 0.5 ? 10 : -10;
  // Clamp the circle radius to a minimum of 10 and a maximum of 250,
  // so it won't disappear or get bigger than the viewport
  const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
  circle.setAttribute("r", newValue);
}

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement

Browser compatibility

BCD tables only load in the browser