SVGCircleElement

This article needs a technical review. How you can help.

This article needs an editorial review. How you can help.

The SVGCircleElement interface is an interface for the <circle> element. The circle element is defined by the cx and cattributes, 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 x-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="http://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

Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<circle>' in that specification.
Recommendation Initial Definition

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) No support (Yes) 3.0.4

See also

Document Tags and Contributors

 Contributors to this page: essymo, mehulsr, fscholz, kscarfone, Sheppy, Jeremie
 Last updated by: essymo,