<rect>

Das <rect> Element ist ein SVG Element, aus welchem Rechtecke mittels einer definierten Eckposition, einer Höhe und einer Breite erstellt werden können. Zudem sind Rechtecke mit abgerundeten Ecken möglich.

Nutzungskontext

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

Attribute

Globale Attribute

Spezifische Attribute

x (en-US): Legt die x-Koordinate des rect-Elements fest.
y (en-US): Legt die y-Koordinate des rect-Elements fest.
width (en-US): Legt die Breite des rect-Elements fest.
height (en-US): Legt die Höhe des rect-Elements fest.
rx (en-US): Legt den horizontalen Eckradius des rect-Elements fest.
ry (en-US): Legt den vertikalen Eckradius des rect-Elements fest.

DOM Interface

Dieses Element implementiert das SVGRectElement (en-US) Interface.

Beispiele

Einfache Nutzung des rect-Elements

SVG

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>

Ergebnis

Rect-Element mit abgerundeten Ecken

SVG

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100" rx="15" ry="15"/>
</svg>

Ergebnis

Spezifikationen

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 Die Definition von '<rect>' in dieser Spezifikation.	Anwärter Empfehlung
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Die Definition von '<rect>' in dieser Spezifikation.	Empfehlung	Erste Definition

Browser Kombatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basis Unterstützung	1.0	(Ja)	1.5 (1.8)	9.0	8.0	3.0.4

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basis Unterstützung	3.0	(Ja)	1.0 (1.8)	Nicht unterstützt	(Ja)	3.0.4

Die Tabelle stützt sich auf diese Quellen.

Siehe auch

<path>