This site is supported by donations to The OEIS Foundation.
Template:Ellipse/doc
From OeisWiki
ellipse}} graphic template is used to draw an ellipse.
The {{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> }} }} |
|
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}}
- {{Square}}
- {{Round square}} ({{rounded corners square}})
- {{Rect}} ({{rectangle}})
- {{Round rect}} ({{rounded corners rectangle}})
- {{Polyline}}
- {{Polygon}} ({{closed polyline}})
- {{Regular polygon}}
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}})