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 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
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
js
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 with JavaScript enabled. Enable JavaScript to view data.
See also
<ellipse>
SVG Element