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.

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement SVGEllipseElement

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

js
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

See also