SVGEllipseElement
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The SVGEllipseElement interface provides access to the properties of <ellipse> elements.
Instance properties
Inherits methods from its parent interface, SVGGeometryElement.
SVGEllipseElement.cxRead only-
This property returns an
SVGAnimatedLengthreflecting thecxattribute of the given<ellipse>element. SVGEllipseElement.cyRead only-
This property returns an
SVGAnimatedLengthreflecting thecyattribute of the given<ellipse>element. SVGEllipseElement.rxRead only-
This property returns an
SVGAnimatedLengthreflecting therxattribute of the given<ellipse>element. SVGEllipseElement.ryRead only-
This property returns an
SVGAnimatedLengthreflecting theryattribute 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" />
</svg>
JavaScript
js
const ellipse = document.getElementById("ellipse");
function outputSize() {
// Outputs "horizontal radius: 100 vertical radius: 60"
console.log(
`horizontal radius: ${ellipse.rx.baseVal.valueAsString}`,
`vertical radius: ${ellipse.ry.baseVal.valueAsString}`,
);
}
ellipse.addEventListener("click", outputSize);
Result
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGEllipseElement |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGEllipseElement
|
|
|
|
|
|
|
|
|
|
|
|
|
cx
|
|
|
|
|
|
|
|
|
|
|
|
|
cy
|
|
|
|
|
|
|
|
|
|
|
|
|
rx
|
|
|
|
|
|
|
|
|
|
|
|
|
ry
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
<ellipse>SVG Element