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 an SVGAnimatedLength reflecting the cx attribute of the given <ellipse> element.
SVGEllipseElement.cy Read only: This property returns an SVGAnimatedLength reflecting the cy attribute of the given <ellipse> element.
SVGEllipseElement.rx Read only: This property returns an SVGAnimatedLength reflecting the rx attribute of the given <ellipse> element.
SVGEllipseElement.ry Read only: This property returns an 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

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`SVGEllipseElement`
`cx`
`cy`
`rx`
`ry`

Tip: you can click/tap on a cell for more information.

Full support: Full support

Legend