<rect>

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

html
<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

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

Spezifikationen

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

Siehe auch