<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.

* Some parts of this feature may have varying levels of support.

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

Hinweis: Ellipsen können die genaue Ausrichtung der Ellipse nicht spezifizieren (wenn Sie beispielsweise eine Ellipse in einem 45-Grad-Winkel zeichnen wollten), aber sie kann durch die Verwendung des transform-Attributs gedreht werden.

Beispiel

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 ermöglicht es, die Gesamtlänge des Pfades in Benutzereinheiten festzulegen. Wertetyp: <number> ; Standardwert: none; Animierbar: ja

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

Nutzungskontext

KategorienGrundformelement, Grafikelement, Formelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# EllipseElement

Browser-Kompatibilität

Siehe auch