<rect>
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 <rect>
SVG Element ist eine grundlegende SVG-Form, die Rechtecke zeichnet, definiert durch ihre Position, Breite und Höhe. Die Ecken der Rechtecke können abgerundet sein.
Beispiel
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Regular rectangle -->
<rect width="100" height="100" />
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
Attribute
x
-
Die x-Koordinate des Rechtecks. Wertetyp: <length>|<percentage> ; Standardwert:
0
; Animierbar: ja y
-
Die y-Koordinate des Rechtecks. Wertetyp: <length>|<percentage> ; Standardwert:
0
; Animierbar: ja width
-
Die Breite des Rechtecks. Wertetyp:
auto
|<length>|<percentage> ; Standardwert:auto
; Animierbar: ja height
-
Die Höhe des Rechtecks. Wertetyp:
auto
|<length>|<percentage> ; Standardwert:auto
; Animierbar: ja rx
-
Der horizontale Eckradius des Rechtecks. Standardmäßig auf
ry
, wenn dieses angegeben ist. Wertetyp:auto
|<length>|<percentage> ; Standardwert:auto
; Animierbar: ja ry
-
Der vertikale Eckradius des Rechtecks. Standardmäßig auf
rx
, wenn dieses angegeben ist. Wertetyp:auto
|<length>|<percentage> ; Standardwert:auto
; Animierbar: ja pathLength
-
Die Gesamtlänge des Umfanges des Rechtecks in Benutzereinheiten. Wertetyp: <number> ; Standardwert: none; Animierbar: ja
Hinweis: Ab SVG2 sind x
, y
, width
, height
, rx
und ry
Geometrie-Eigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften für dieses Element verwendet werden können.
Verwendungskontext
Kategorien | Grundformelement, Grafikelement, Formelement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente |
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # RectElement |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- SVG-Präsentationsattribute einschließlich
fill
undstroke
- Andere grundlegende SVG-Formen:
<circle>
,<ellipse>
,<line>
,<polygon>
,<polyline>