<rect>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

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.

Verwendungskontext

Kategorien	Grundformelement, Grafikelement, Formelement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente

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 ry, falls angegeben. Wertetyp: auto | <length> | <percentage>; Standardwert: auto; Animierbar: ja
ry: Der vertikale Eckradius des Rechtecks. Standardmäßig rx, falls angegeben. Wertetyp: auto | <length> | <percentage>; Standardwert: auto; Animierbar: ja
pathLength: Die Gesamtlänge des Rechteckumfangs 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.

DOM-Schnittstelle

Dieses Element implementiert die SVGRectElement-Schnittstelle.

Beispiel

html,
body,
svg {
  height: 100%;
}

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>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RectElement

Browser-Kompatibilität

Siehe auch

SVG-Präsentationsattribute einschließlich fill und stroke
Andere grundlegende SVG-Figuren: <circle>, <ellipse>, <line>, <polygon>, <polyline>

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden