SVGCircleElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheSVGCircleElement interface is an interface for the<circle> element.

Instance properties

This interface also inherits properties from its parent,SVGGeometryElement.

SVGCircleElement.cxRead only: This property defines the x-coordinate of the center of the<circle> element. It is denoted by thecx attribute of the element.
SVGCircleElement.cyRead only: This property defines the y-coordinate of the center of the<circle> element. It is denoted by thecy attribute of the element.
SVGCircleElement.rRead only: This property defines the radius of the<circle> element. It is denoted by ther 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" /></svg>

JavaScript

const circle = document.getElementById("circle");function clickCircle() {  // 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);}circle.addEventListener("click", clickCircle);