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.

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

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement 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

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" />
</svg>

JavaScript

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

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGCircleElement

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SVGCircleElement
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 1.5 (Release date: 2005-11-29)
footnote Full support
Opera – Full support
Opera 8 (Release date: 2005-04-19)
footnote Full support
Safari – Full support
Safari 3 (Release date: 2007-10-26)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 10.1 (Release date: 2010-11-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 1 (Release date: 2007-06-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 1 (Release date: 2007-06-29)
footnote Full support
cx
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 1.5 (Release date: 2005-11-29)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 3 (Release date: 2007-10-26)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 1 (Release date: 2007-06-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 1 (Release date: 2007-06-29)
footnote Full support
cy
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 1.5 (Release date: 2005-11-29)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 3 (Release date: 2007-10-26)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 1 (Release date: 2007-06-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 1 (Release date: 2007-06-29)
footnote Full support
r
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 1.5 (Release date: 2005-11-29)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 3 (Release date: 2007-10-26)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 1 (Release date: 2007-06-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote Full support
WebView on iOS – Full support
WebView on iOS 1 (Release date: 2007-06-29)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also