The SVGEllipseElement
interface provides access to the properties of {{ SVGElement("ellipse") }} elements, as well as methods to manipulate them.
Properties
{{ SVGAttr("cx") }} {{ domxref("SVGAnimatedLength") }}{{readonlyInline}}
Corresponds to attribute {{ SVGAttr("cx") }} on the given {{ SVGElement("ellipse") }} element.
{{ SVGAttr("cy") }} {{ domxref("SVGAnimatedLength") }}{{readonlyInline}}
Corresponds to attribute {{ SVGAttr("cy") }} on the given {{ SVGElement("ellipse") }} element.
{{ SVGAttr("rx") }} {{ domxref("SVGAnimatedLength") }}{{readonlyInline}}
Corresponds to attribute {{ SVGAttr("rx") }} on the given {{ SVGElement("ellipse") }} element.
{{ SVGAttr("ry") }} {{ domxref("SVGAnimatedLength") }}{{readonlyInline}}
Corresponds to attribute {{ SVGAttr("ry") }} on the given {{ SVGElement("ellipse") }} element
Normative document SVG 1.1 (2nd Edition)
Methods
The SVGEllipseElement
interface do not provide any specific methods.
Example
<!-- SVG Specifications --> <svg xmlns="https://www.w3.org/2000/svg" version="1.1"> <eclipse cx="200" cy="80"
rx="100" ry="50"fill="gold" id="my_eclipse" onclick="clickEclipse();"/> </svg
<script type="text/javascript">
//This function 'clickEclipse()' is called when 'my_eclipse' is clicked. It randomly increases or decreases the radius of the eclipse element.
function clickEclipse() {
var my_eclipse = document.getElementById('my_eclipse'); //Get a reference to the circle in the HTML document
var current_radius = parseInt(my_eclipse.getAttribute('r'), 10); //Get the current radius value using 'getAttribute()' function
var change = Math.random() > 0.5 ? 10 : -10; //Randomly determine if the circle radius will increase or decrease
my_eclipse.setAttribute('r',current_radius + change); //Set the new radius value using the 'setAttribute()' function
}
</script>
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} | 9.0 | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{ CompatNo() }} | {{ CompatVersionUnknown() }} | {{ CompatUnknown() }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} |
See also
- {{ SVGElement("ellipse") }} SVG Element