mozilla

Revision 236677 of ellipse

  • Revision slug: SVG/Element/ellipse
  • Revision title: ellipse
  • Revision id: 236677
  • Created:
  • Creator: Manuel_Strehl
  • Is current revision? No
  • Comment 86 words added

Revision Content

{{ SVGRefElem() }}

The ellipse element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.

Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse titled at a 45 degree angle), but can be rotated by using the {{ SVGAttr("transform") }} attribute.

Usage context

Categories Basic shape element, Graphics element, Shape element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Normative document SVG 1.1 (2nd Edition)

Example

Source code Output result
{{ embed_text("ellipse.svg", "xml") }} {{ EmbedSVG("ellipse.svg",120,120) }}

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("cx") }}
  • {{ SVGAttr("cy") }}
  • {{ SVGAttr("rx") }}
  • {{ SVGAttr("ry") }}

DOM Interface

This element implements the SVGEllipseElement interface.

Browser compatibility

{{ CompatibilityTable() }}

{{ CompatTableHeader() }}
Basic support 1.0 {{ CompatGeckoDesktop('1.8') }} {{ CompatIE('9.0') }} {{ CompatOpera('8.0') }} {{ CompatSafari('3.0.4') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatAndroid('3.0') }} {{ CompatGeckoMobile('1.8') }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatSafari('3.0.4') }}

The chart is based on these sources.

See also

  • {{ SVGElement("circle") }}

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>The <code>ellipse</code> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.</p>
<p>Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse titled at a 45 degree angle), but can be rotated by using the {{ SVGAttr("transform") }} attribute.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Basic shape element, Graphics element, Shape element</td> </tr> <tr> <th scope="row">Permitted content</th> <td>Any number of the following elements, in any order:<br> <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a> »<br> <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a> »</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElement" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElement">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2>Example</h2>
<table class="standard-table"> <tbody> <tr> <th scope="col">Source code</th> <th scope="col">Output result</th> </tr> <tr> <td>{{ embed_text("ellipse.svg", "xml") }}</td> <td>{{ EmbedSVG("ellipse.svg",120,120) }}</td> </tr> </tbody>
</table><h2>Attributes</h2>
<h3>Global attributes</h3>
<ul> <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> <li>{{ SVGAttr("transform") }}</li>
</ul>
<h3>Specific attributes</h3>
<ul> <li>{{ SVGAttr("cx") }}</li> <li>{{ SVGAttr("cy") }}</li> <li>{{ SVGAttr("rx") }}</li> <li>{{ SVGAttr("ry") }}</li>
</ul><h2>DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGEllipseElement" title="en/DOM/SVGEllipseElement">SVGEllipseElement</a></code> interface.</p>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
{{ CompatTableHeader() }}<table class="compat-table"> <tbody>  <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoDesktop('1.8') }}</td> <td>{{ CompatIE('9.0') }}</td> <td>{{ CompatOpera('8.0') }}</td> <td>{{ CompatSafari('3.0.4') }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatAndroid('3.0') }}</td> <td>{{ CompatGeckoMobile('1.8') }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatSafari('3.0.4') }}</td> </tr> </tbody>
</table>
</div>
<p>The chart is based on <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">these sources</a>.</p><h2>See also</h2>
<ul> <li>{{ SVGElement("circle") }}<a class="external" href="http://www.w3schools.com/svg/svg_ellipse.asp"><br> </a></li>
</ul>
Revert to this revision