W3docs
de
Anmelden

SVG Ellipse

Hier finden Sie Informationen zum SVG-Element <ellipse>, lernen, wie man damit eine Ellipse erstellt, und sehen verschiedene Beispiele.

Was ist das SVG-Element <ellipse>?

Das SVG-Element <ellipse> zeichnet eine Ellipse — eine ovale, „gestreckte Kreis"-Form. Sie positionieren es über seinen Mittelpunkt (cx, cy) und geben ihm zwei Radien: rx für den horizontalen Radius und ry für den vertikalen Radius.

Dies ist der wesentliche Unterschied zum <circle>-Element. Ein Kreis hat einen einzigen Radius (r), weil er in jede Richtung gleich breit ist. Eine Ellipse benötigt zwei Radien, weil sie in einer Richtung breiter ist als in der anderen:

  • Verwenden Sie <circle>, wenn die Form perfekt rund ist.
  • Verwenden Sie <ellipse>, wenn Sie ein Oval benötigen oder wenn rx und ry unterschiedlich sein sollen.

Wenn Sie rx gleich ry setzen, wird die Ellipse als Kreis dargestellt.

Das SVG-Koordinatensystem

Wie jede SVG-Form wird eine Ellipse auf der SVG-Leinwand platziert, wobei der Ursprung (0, 0) die obere linke Ecke ist. Die x-Achse verläuft nach rechts und die y-Achse verläuft nach unten. So platziert cx="230" cy="120" den Mittelpunkt der Ellipse 230 Einheiten von links und 120 Einheiten von oben. Weitere Informationen zum Koordinatensystem und zum viewport finden Sie im Kapitel zum <svg>-Tag.

Info

Das Element <ellipse> hat kein Attribut für die Ausrichtung, daher sind seine rx/ry-Achsen immer horizontal und vertikal. Um eine Ellipse zu neigen, drehen Sie sie mit dem Attribut transform (unten gezeigt).

Beispiel des SVG-Elements <ellipse>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Probier es selbst »

Im obigen Code setzen cx="230" und cy="120" den Mittelpunkt, rx="150" macht die Ellipse 300 Einheiten breit und ry="70" macht sie 140 Einheiten hoch. Das Attribut style füllt sie pink und gibt ihr einen 5-Einheiten-breiten hellblauen Rahmen.

Beispiel des SVG-Elements <ellipse> zum Erstellen zweier übereinanderliegender Ellipsen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg  width="400" height="200">
      <ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
      <ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
      Sorry,inline SVG isn't supported by your browser. 
    </svg>
  </body>
</html>
Probier es selbst »

Sie können beliebig viele Ellipsen mit verschiedenen Farben und Größen hinzufügen.

Beispiel des SVG-Elements <ellipse> zum Kombinieren zweier Ellipsen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="150" >
      <ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
      <ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Probier es selbst »

Beispiel zum Drehen und Gestalten einer <ellipse>:

Da <ellipse> selbst kein Ausrichtungsattribut besitzt, wird es mit dem Attribut transform="rotate(...)" geneigt. Die ersten beiden Zahlen, die nach dem Winkel an rotate() übergeben werden, sind der Mittelpunkt, um den gedreht wird — hier der eigene Mittelpunkt der Ellipse, sodass sie sich an Ort und Stelle dreht. Dieses Beispiel verwendet auch opacity und einen gestrichelten Rahmen über stroke-dasharray:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="200" cy="100" rx="150" ry="60"
        transform="rotate(-25 200 100)"
        style="fill:plum;opacity:0.7;stroke:purple;stroke-width:4;stroke-dasharray:10,6" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Der Wert rotate(-25 200 100) dreht die Ellipse 25 Grad gegen den Uhrzeigersinn um den Punkt (200, 100), opacity:0.7 macht sie leicht transparent und stroke-dasharray:10,6 zeichnet den Rahmen als 10-Einheiten-Striche mit 6-Einheiten-Lücken dazwischen.

Attribute

AttributBeschreibung
cxDie x-Koordinate des Mittelpunkts der Ellipse.
cyDie y-Koordinate des Mittelpunkts der Ellipse.
rxDer horizontale Radius (entlang der x-Achse).
ryDer vertikale Radius (entlang der y-Achse).
pathLengthDie Gesamtlänge des Pfades in Benutzereinheiten.

Das SVG-Element <ellipse> unterstützt auch die Globalen Attribute und Ereignis-Attribute.

Verwandte Kapitel

  • SVG <circle> — das runde Gegenstück mit einem einzigen Radius r.
  • HTML SVG-Tag — der <svg>-Container, viewport und das Koordinatensystem.

Übung

Übung
Welche Attribute legen die beiden Radien einer SVG-Ellipse fest?
Welche Attribute legen die beiden Radien einer SVG-Ellipse fest?
Was this page helpful?