<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

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

Specification
Scalable Vector Graphics (SVG) 2
# RectElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch