SVGEllipseElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Instance properties

Inherits methods from its parent interface, SVGGeometryElement.

SVGEllipseElement.cx Read only: This property returns a SVGAnimatedLength reflecting the cx attribute of the given <ellipse> element.
SVGEllipseElement.cy Read only: This property returns a SVGAnimatedLength reflecting the cy attribute of the given <ellipse> element.
SVGEllipseElement.rx Read only: This property returns a SVGAnimatedLength reflecting the rx attribute of the given <ellipse> element.
SVGEllipseElement.ry Read only: This property returns a SVGAnimatedLength reflecting the ry 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"
    id="ellipse"
    onclick="outputSize();" />
</svg>

JavaScript

function outputSize() {
  const ellipse = document.getElementById("ellipse");

  // Outputs "horizontal radius: 100 vertical radius: 60"
  console.log(
    `horizontal radius: ${ellipse.rx.baseVal.valueAsString}`,
    `vertical radius: ${ellipse.ry.baseVal.valueAsString}`,
  );
}

Result

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGEllipseElement

Browser compatibility

BCD tables only load in the browser