SVG <ellipse>

SVG ovaal - <ellipse>

<ellipse> Het element wordt gebruikt om ovaalvormen te maken.

De ovaal is nauw verwant aan de cirkel. Het verschil zit in het feit dat de x- en y-stralen van de ovaal verschillend zijn, terwijl de stralen van de cirkel gelijk zijn:

Voorbeeld 1

Het volgende voorbeeld maakt een ovaal:

Dit is een SVG-code:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

Probeer het zelf

Code-exploratie:

• De 'cx'-eigenschap definieert de x-coördinaat van het middelpunt van de ovaal
• De 'cy'-eigenschap definieert de y-coördinaat van het middelpunt van de ovaal
• De 'rx'-eigenschap definieert de horizontale straal
• De 'ry'-eigenschap definieert de verticale straal

Voorbeeld 2

Het volgende voorbeeld maakt drie overlappinge ovaalvormen:

Dit is een SVG-code:

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

Probeer het zelf

Voorbeeld 3

Het volgende voorbeeld combineert twee ovaalvormen (één geel en één wit):

Dit is een SVG-code:

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

Probeer het zelf