<ellipse>

Baseline Widely available *

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

* 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 einer Mittelpunktkoordinate sowie deren x- und y-Radius zu erstellen.

Hinweis: Ellipsen können die genaue Ausrichtung der Ellipse nicht angeben (zum Beispiel, wenn Sie eine um 45 Grad geneigte Ellipse zeichnen möchten), aber sie können durch das Attribut transform rotiert werden.

Verwendungszusammenhang

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

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 des Pfades in Benutzereinheiten anzugeben. Wertetyp: <number>; Standardwert: none; Animierbar: ja

Hinweis: Beginnend mit 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.

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>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# EllipseElement

Browser-Kompatibilität

Siehe auch