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 a
SVGAnimatedLength
reflecting thecx
attribute of the given<ellipse>
element. SVGEllipseElement.cy
Read only-
This property returns a
SVGAnimatedLength
reflecting thecy
attribute of the given<ellipse>
element. SVGEllipseElement.rx
Read only-
This property returns a
SVGAnimatedLength
reflecting therx
attribute of the given<ellipse>
element. SVGEllipseElement.ry
Read only-
This property returns a
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
BCD tables only load in the browser
See also
<ellipse>
SVG Element