Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).

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

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'SVGCircleElement' in that specification.
Candidate Recommendation Replaced the inheritance from SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, and SVGTransformable by SVGGeometryElement
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'SVGCircleElement' in that specification.
Recommendation Initial definition

Browser Compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 8Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.1Samsung Internet Android ?
cxChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
cyChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : fscholz, Sebastianz, david_ross, abbycar, t1nr2y, essymo, mehulsr, kscarfone, Sheppy, Jeremie
Dernière mise à jour par : fscholz,