SVG/Element/rect

Das rect-Element (engl. rectangle) definiert ein Rechteck.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt.

erlaubte Inhalte

animate, animateMotion, animateTransform, set, title (dann wird ein End-Tag nötig)

Attribute

Name	Inhalt	Standardwert	Bedeutung
x	NUMBER	Pixelwert	horizontale Position der linken oberen Ecke
y	NUMBER	Pixelwert	vertikale Position der linken oberen Ecke
width	NUMBER	Pixelwert	Breite
height	NUMBER	Pixelwert	Höhe
rx	NUMBER	Pixelwert	X-Radius der Ecken-Abrundung
ry	NUMBER	Pixelwert	Y-Radius der Ecken-Abrundung
transform	CDATA
systemLanguage	IANA		Sprachkürzel

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel ansehen …

  <svg viewBox="0 0 870 300">
    <rect class="eins" width="200" height="100"/>
    <rect class="zwei" x="220" y="20"   width="200" height="100"/>
    <rect class="drei" x="100" y="150" width="200" height="100" rx="50"/>
    Ihr Browser kann kein SVG.
  </svg>

Das Beispiel enthält drei Vierecke.

• das erste rect-Element hat keine x,y-Koordinaten, die linke obere Ecke wird auf 0,0 gesetzt.
• das zweite rect-Element enthält x und y-Attribute, die es entsprechend positionieren.
• das dritte rect-Element erhält mit rx und ry abgerundete Ecken.

Beachten Sie: In diesem Beispiel wurde das viewBox-Attribut XML-konform in CamelCase geschrieben. In HTML5 wäre eine konsequente Kleinschreibung möglich.

Siehe auch

• SVG/Tutorials/Einstieg/Grundformen

Weblinks

• W3C: RectElement