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 object is read-only, which means that any attempt to modify the object will raise an exception.

Properties

cx

It defines the x-coordinate of the centre of the circle element. It is denoted by the attribute cx in the <circle> element. If unspecified, the value of this attribute is assumed to be "0".

This property can be animated by SVG's animation elements.

cy

It defines the y-coordinate of the centre of the circle element. It is denoted by the attribute cy in the <circle> element. If unspecified, the value of this attribute is assumed to be "0".

This property can be animated by SVG's animation elements.

r

It defines the radius of the circle element. It is denoted by the attribute r in the <circle> element. The value of r must be positive to allow the successful rendering of the element. A negative value gives an error, while "0" disables the rendering of the element.

This property can be animated by SVG's animation elements.

Methods

The SVGCircleElement interface does not provide any specific methods.

Example

Here is a simple usage of the SVGCircle interface.

 <!-- SVG Specifications -->
<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
   <!-- Creating a circle with (x,y) coordinates of the centre as (100,100) and radius=50 -->
   <circle cx="100" cy="100" r="50" fill="gold" id="my_circle" onclick="clickCircle();"/> 
</svg

<script type="text/javascript"> 
      //This function 'clickCircle()' is called when 'my_circle' is clicked. It randomly increases or decreases the radius of the circle element.
      function clickCircle() {
        var my_circle = document.getElementById('my_circle');            //Get a reference to the circle in the HTML document
        var current_radius = parseInt(my_circle.getAttribute('r'), 10);  //Get the current radius value using 'getAttribute()' function
        var change = Math.random() > 0.5 ? 10 : -10;                     //Randomly determine if the circle radius will increase or decrease
        my_circle.setAttribute('r',current_radius + change);             //Set the new radius value using the 'setAttribute()' function
      }
  </script>

Click on the circle.

Specifications

Browser Compatibility

See also

• <circle> SVG Element