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 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.
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
Specification |
---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGEllipseElement |
Browser compatibility
BCD tables only load in the browser
See also
<ellipse>
SVG Element