SVGCircleElement

The SVGCircleElement interface is an interface for the <circle> element. The circle element is defined by the cx and cy attributes that denote the coordinates of the centre of the circle. It also has a radius attribute r that denotes the radius of the circle. The radius value must be positive to allow the successful rendering of the element.

The SVGCircleElement interface is read-only, which means that any attempt to modify the object will raise an exception.

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 <circle> element. If unspecified, the value of this attribute is assumed to be 0.

It can be animated by SVG's animation elements.

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 <circle> element. If unspecified, the value of this attribute is assumed to be 0.

It can be animated by SVG's animation elements.

SVGCircleElement.r Read only

This property defines the radius of the circle element. It is denoted by the r of the <circle> element. A negative value gives an error, while 0 disables the rendering of the element.

It can be animated by SVG's animation elements.

Methods

This interface has no methods but inherits methods from its parent, SVGGeometryElement.

Example

SVG content

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

JavaScript content

This function clickCircle() is called when the circle is clicked. It randomly increases or decreases the radius of the circle element.

function clickCircle() {
  var circle = document.getElementById("circle");
  // Randomly determine if the circle radius will increase or decrease
  var change = Math.random() > 0.5 ? 10 : -10;
  circle.setAttribute("r", circle.r.baseVal.value + change);
}

Click on the circle.

Specifications

Browser Compatibility

See also

• <circle> SVG element