Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!
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
- Conditional processing attributes
- Core attributes
- Graphical event attributes
- Presentation attributes
classstyleexternalResourcesRequiredtransform
Spezifische Attribute
x- Legt die x-Koordinate des rect-Elements fest.
y- Legt die y-Koordinate des rect-Elements fest.
width- Legt die Breite des rect-Elements fest.
height- Legt die Höhe des rect-Elements fest.
rx- Legt den horizontalen Eckradius des rect-Elements fest.
ry- Legt den vertikalen Eckradius des rect-Elements fest.
DOM Interface
Dieses Element implementiert das SVGRectElement 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!
| 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.