SVGEllipseElement

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⁩.

TheSVGEllipseElement interface provides access to the properties of<ellipse> elements.

Instance properties

Inherits methods from its parent interface,SVGGeometryElement.

SVGEllipseElement.cxRead only: This property returns anSVGAnimatedLength reflecting thecx attribute of the given<ellipse> element.
SVGEllipseElement.cyRead only: This property returns anSVGAnimatedLength reflecting thecy attribute of the given<ellipse> element.
SVGEllipseElement.rxRead only: This property returns anSVGAnimatedLength reflecting therx attribute of the given<ellipse> element.
SVGEllipseElement.ryRead only: This property returns anSVGAnimatedLength reflecting thery attribute of the given<ellipse> element.

Instance methods

Inherits methods from its parent interface,SVGGeometryElement.

Example

SVG

html

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">  <ellipse cx="100" cy="100" rx="100" ry="60" /></svg>

JavaScript

const ellipse = document.getElementById("ellipse");function outputSize() {  // Outputs "horizontal radius: 100 vertical radius: 60"  console.log(    `horizontal radius: ${ellipse.rx.baseVal.valueAsString}`,    `vertical radius: ${ellipse.ry.baseVal.valueAsString}`,  );}ellipse.addEventListener("click", outputSize);