This site is supported by donations to The OEIS Foundation.

Template:Ellipse

From OeisWiki
Jump to: navigation, search
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






Affine transforms templates

See Help:CSS Transforms.