Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen 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

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

Attribute

Globale Attribute

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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: philSixZero
Zuletzt aktualisiert von: philSixZero,