Template:Ellipse

The following documentation is located at Template:Ellipse/doc. [<Edit> Template:Ellipse/doc]
[⧼Purge⧽ Template:Ellipse]

The {{ellipse}} graphic template is used to draw an ellipse.

Usage

{{ellipse|center = x_0, y_0|semi-axes = x semi-axis, y semi-axis|units = units|stroke = stroke|fill = fill|content = content}}

Where (the origin being at the bottom left of the canvas):

• center are the (comma separated) coordinates x_0, y_0 of the center of the ellipse. (0, 0 as default value. The center of the ellipse is thus at the bottom left of the containing element by default.)
• semi-axes are the (comma separated) lengths x semi-axis, y semi-axis of the semi-axes of the ellipse. (25, 25 as default, i.e. 25px for both with default units.)
• units are the units used with center and semi-axes. (px as default.)
• stroke is used to override the default stroke style (1px black, i.e.     ).
• fill is used to override the default fill style, i.e. none.
• content is optional content, e.g. text, to show inside the ellipse.

Examples

Note: In Firefox 17.0.1, the stroke style seems to allow either none or solid. Also, the {{rotate}} template does not currently work, now we only get that small orange blob...

Code

Result

{{canvas|width = 500|height = 500|float = right| {{ellipse|center = 50, 50|semi-axes = 50, 50|units = %|stroke = none|fill = white}} {{ellipse}} <!-- default (center: 0, 0; semi-axes: 25, 25; units: px) --> <!-- magenta, 50% alpha --> {{ellipse|25, 25|units = %|stroke = 1px dashed red|fill = rgba(255, 0, 255, 0.5)}} <!-- yellow, 25% alpha --> {{ellipse|0, 0|60, 30|units = %|stroke = none|fill = rgba(255, 255, 0, 0.25)}} {{ellipse|75, 100|5, 50|units = %|stroke = 10px dotted green}} {{ellipse |center = 25, 75|semi-axes = 25, 5|units = px |stroke = 5px solid purple|fill = black }} {{ellipse|semi-axes = 40, 10|units = %|stroke = 3px solid orange}} {{rotate|{{ellipse|semi-axes = 40, 10|units = %|stroke = 3px solid orange}}|45}} {{ellipse |40, 90|semi-axes = 20, 5|units = %|stroke = 3px solid orange |content = <div align="center" valign="middle" style="text-align: center;">I'm orange!</div> }} }}

I'm orange!

Code

<noinclude>{{Documentation}}</noinclude><includeonly><!--

Usage: 

{{ellipse
| center = ''x_0, y_0'' 
| semi-axes = ''x semi-axis, y semi-axis''
| units = ''units'' 
| stroke = ''stroke''
| fill = ''fill''
| content = ''content''
}}

where the origin is at the bottom left of the canvas.

--><!-- 

Note: Webkit only allows the transform of block elements, not inline elements. Using 

  display: inline-block;

in the style of an inline element, like <span>...</span>, makes it a block element, although inline.
 
--><span style="display: inline-block; position: absolute; 
left: {{#expr: ( {{#explode:{{{center|{{{1|0, 0}}}}}}|, |0}} ) - ( {{#explode:{{{semi-axes|{{{2|25, 25}}}}}}|, |0}} ) }}{{{units|px}}}; 
bottom:  {{#expr: ( {{#explode:{{{center|{{{1|0, 0}}}}}}|, |1}} ) - ( {{#explode:{{{semi-axes|{{{2|25, 25}}}}}}|, |1}} ) }}{{{units|px}}}; 
width:  {{#expr: 2 * ( {{#explode:{{{semi-axes|{{{2|25, 25}}}}}}|, |0}} ) }}{{{units|px}}}; 
height: {{#expr: 2 * ( {{#explode:{{{semi-axes|{{{2|25, 25}}}}}}|, |1}} ) }}{{{units|px}}}; 
background: {{{fill|none}}}; border: {{{stroke|1px solid black}}}; border-radius: 50%;">{{#if: {{{content|}}} |{{{content}}}|}}</span></includeonly>

See also

Drawing templates

• {{Canvas}}

• {{Draw text}}
• {{Image}}

• {{Point}}
• {{Line}}

• {{Square}}
• {{Round square}} ({{rounded corners square}})
• {{Rect}} ({{rectangle}})
• {{Round rect}} ({{rounded corners rectangle}})

• {{Polyline}}
• {{Polygon}} ({{closed polyline}})
• {{Regular polygon}}

• {{Circle}}
• {{Ellipse}}

Affine transforms templates

See Help:CSS Transforms.

• {{Origin}}

• {{Translate}} and {{transform-translate}}
• {{Flip}}
• {{Scale}} and {{transform-scale}}

• {{Rotate}} and {{transform-rotate}}
• {{SkewX}}
• {{SkewY}}
• {{Skew}} and {{transform-skew}}

• {{Affine}} ({{affine matrix}})