SVG <ellipse>

SVG-Ellipse - <ellipse>

<ellipse> Das Element wird verwendet, um Ellipsen zu erstellen.

Die Ellipse ist eng mit dem Kreis verbunden. Der Unterschied liegt darin, dass die x- und y-Radien der Ellipse unterschiedlich sind, während der Kreis gleich große x- und y-Radien hat:

Beispiel 1

Das folgende Beispiel erstellt eine Ellipse:

Dies ist 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>

Versuchen Sie es selbst

Code-Explainierung:

  • Die Eigenschaft cx definiert den x-Wert des Ellipsenzentrums
  • Die Eigenschaft cy definiert den y-Wert des Ellipsenzentrums
  • Die Eigenschaft rx definiert den horizontalen Radius
  • Die Eigenschaft ry definiert den vertikalen Radius

Beispiel 2

Das folgende Beispiel erstellt drei aufeinanderfolgende, sich überlappende Ellipsen:

Dies ist 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>

Versuchen Sie es selbst

Beispiel 3

Das folgende Beispiel kombiniert zwei Ellipsen (eine gelb und eine weiß):

Dies ist 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>

Versuchen Sie es selbst