<ellipse>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <ellipse>-Element ist eine SVG-Grundform, die verwendet wird, um Ellipsen basierend auf einem Mittelpunkt und sowohl ihrem x- als auch y-Radius zu erstellen.

Hinweis: Ellipsen können nicht die genaue Ausrichtung der Ellipse angeben (wenn Sie beispielsweise eine um 45 Grad geneigte Ellipse zeichnen möchten), können aber mit dem transform-Attribut rotiert werden.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

Attribute

cx: Die x-Position des Mittelpunkts der Ellipse. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja
cy: Die y-Position des Mittelpunkts der Ellipse. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja
rx: Der Radius der Ellipse auf der x-Achse. Wertetyp: auto|<length>|<percentage> ; Standardwert: auto; Animierbar: ja
ry: Der Radius der Ellipse auf der y-Achse. Wertetyp: auto|<length>|<percentage> ; Standardwert: auto; Animierbar: ja
pathLength: Dieses Attribut erlaubt es, die Gesamtlänge für den Pfad in Benutzereinheiten anzugeben. Wertetyp: <number> ; Standardwert: none; Animierbar: ja

Hinweis: Ab SVG2 sind cx, cy, rx und ry Geometrie-Eigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften für dieses Element verwendet werden können.

Verwendungskontext

Kategorien	Grundformelement, Grafikelement, Formelement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # EllipseElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Andere SVG-Grundformen: <circle>, <line>, <polygon>, <polyline>, <rect>