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 thecx
attribute of the given<ellipse>
element. SVGEllipseElement.cy
Read only-
This property returns an
SVGAnimatedLength
reflecting thecy
attribute of the given<ellipse>
element. SVGEllipseElement.rx
Read only-
This property returns an
SVGAnimatedLength
reflecting therx
attribute of the given<ellipse>
element. SVGEllipseElement.ry
Read only-
This property returns an
SVGAnimatedLength
reflecting thery
attribute of the given<ellipse>
element.
Instance methods
Inherits methods from its parent interface, SVGGeometryElement
.
Example
SVG
<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
See also
<ellipse>
SVG Element