<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> SVG-Element ist eine grundlegende SVG-Form, die verwendet wird, um Ellipsen anhand eines Mittelpunktes und sowohl ihres x- als auch ihres y-Radius zu erstellen.

Hinweis: Ellipsen können die genaue Ausrichtung der Ellipse nicht angeben (wenn Sie beispielsweise eine Ellipse in einem 45-Grad-Winkel zeichnen möchten), sie kann jedoch durch 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. Werttyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

cy

Die y-Position des Mittelpunkts der Ellipse. Werttyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

rx

Der Radius der Ellipse auf der x-Achse. Werttyp: auto|<length>|<percentage> ; Standardwert: auto; Animierbar: ja

ry

Der Radius der Ellipse auf der y-Achse. Werttyp: auto|<length>|<percentage> ; Standardwert: auto; Animierbar: ja

pathLength

Dieses Attribut ermöglicht das Festlegen der Gesamtlänge des Pfades in Benutzereinheiten. Werttyp: <number> ; Standardwert: none; Animierbar: ja

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

Verwendungszusammenhang

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

BCD tables only load in the browser

Siehe auch