<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 Mittelpunktkoordinatensystem und deren x- und y-Radius zu erstellen.

Hinweis: Ellipsen können die genaue Ausrichtung der Ellipse nicht angeben (zum Beispiel, wenn Sie eine Ellipse in einem 45-Grad-Winkel zeichnen möchten), aber sie kann durch die Verwendung des Attributs transform rotiert 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 Zentrums der Ellipse. Wertetyp: <length> | <percentage>; Standardwert: 0; Animierbar: ja

cy

Die y-Position des Zentrums 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 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

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