SVGEllipseElement

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

Properties

This interface also inherits properties 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.

Methods

This interface doesn't implement any specific methods, but inherits methods from its parent interface, SVGGeometryElement.

Example

SVG content

<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 content

function outputSize() {
  var 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

Browser compatibility

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

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGEllipseElement