<ellipse>
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
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
| Kategorien | Grundformelement, Grafikelement, Formelement |
|---|---|
| Erlaubter Inhalt | Beliebige 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
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # EllipseElement |
Browser-Kompatibilität
Siehe auch
- Andere grundlegende SVG-Formen:
<circle>,<line>,<polygon>,<polyline>,<rect>