W3cubDocs

/Web APIs

SVGCircleElement

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

This interface has no methods but inherits methods from its parent, 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

js

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
SVGCircleElement 1 12 1.5 9 8 3 3 18 4 10.1 1 1.0
cx 1 12 1.5 9 ≤12.1 3 3 18 4 ≤12.1 1 1.0
cy 1 12 1.5 9 ≤12.1 3 3 18 4 ≤12.1 1 1.0
r 1 12 1.5 9 ≤12.1 3 3 18 4 ≤12.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGCircleElement