SVGCircleElement

This interface also inherits properties from its parent, SVGGeometryElement.

SVGCircleElement.cx Read only

This property defines the x-coordinate of the center of the 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 element. It is denoted by the cy attribute of the element.

SVGCircleElement.r Read only

This property defines the radius of the element. It is denoted by the r of the element.

Inherits methods from its parent interface, SVGGeometryElement.

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

HTML

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);
}

• SVG element