SVGEllipseElement

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`SVGEllipseElement`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`cx`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`cy`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`rx`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`ry`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3