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);