W3docs
de
Anmelden

SVG-Rechteck

Auf dieser Seite finden Sie nützliche Informationen über das SVG-Element <rect>, lernen Sie, damit ein Rechteck zu erstellen, und sehen Sie verschiedene Beispiele mit CSS.

Das SVG-Element <rect> zeichnet ein Rechteck. Es ist eine der grundlegenden SVG-Formen (neben <circle>, <ellipse>, <line> und <polygon>) und wird direkt innerhalb eines <svg>-Elements platziert. Diese Seite erklärt, wie man ein Rechteck positioniert und dimensioniert, wie man seine Ecken abrundet und wie man Füllung und Kontur mithilfe von Präsentationsattributen oder CSS steuert.

Wenn SVG neu für Sie ist, beginnen Sie mit der SVG-Einführung. Eine vollständige Liste der Attribute und Elemente finden Sie in der SVG-Referenz.

Beschreibung des Elements <rect>

Das SVG-Element <rect> erstellt ein Rechteck sowie Rechteckvariationen. Es ist möglich, Rechtecke mit verschiedenen Höhen und Breiten, unterschiedlichen Kontur- und Füllfarben usw. zu zeichnen. Wir werden einige Beispiele ausprobieren.

Das SVG-Koordinatensystem

Ein Rechteck wird mit den Attributen x und y positioniert, die von der oberen linken Ecke des SVG-Canvas gemessen werden. Die x-Achse wächst nach rechts und die y-Achse wächst nach unten (ein größerer y-Wert verschiebt die Form weiter nach unten auf dem Bildschirm). Diese Koordinaten werden in Benutzereinheiten angegeben, die standardmäßig Pixeln entsprechen, aber mit dem Attribut viewBox neu zugeordnet werden können. Die wesentlichen Attribute von <rect> sind:

  • x — die horizontale Position des linken Rands des Rechtecks. Standardmäßig 0, wenn weggelassen.
  • y — die vertikale Position des oberen Rands des Rechtecks. Standardmäßig 0, wenn weggelassen.
  • width — die Breite des Rechtecks. Standardmäßig 0, was das Rechteck unsichtbar macht, daher muss dieser Wert fast immer gesetzt werden.
  • height — die Höhe des Rechtecks. Standardmäßig ebenfalls 0 (unsichtbar).
  • rx — der horizontale Radius zur Abrundung der Ecken (optional).
  • ry — der vertikale Radius zur Abrundung der Ecken (optional).

Beispiel des SVG-Elements <rect>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="120">
      <rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
    </svg>
  </body>
</html>
Probier es selbst »

Nun erklären wir diesen Code:

  • Die Attribute width und height geben die Breite und Höhe des Rechtecks an.
  • Das Attribut style gibt einige CSS-Eigenschaften für das Rechteck an.
  • Die CSS-Eigenschaft fill legt die Füllfarbe des Rechtecks fest.
  • Die CSS-Eigenschaft stroke-width wird verwendet, um die Breite des Rahmens des Rechtecks anzugeben.
  • Die CSS-Eigenschaft stroke legt die Farbe des Rahmens des Rechtecks fest.

Präsentationsattribute vs. CSS

Die oben genannten Stile fill, stroke und stroke-width können auch als Präsentationsattribute direkt am Element geschrieben werden, anstatt in einem style-Attribut. Die beiden folgenden Codeausschnitte sind gleichwertig:

<!-- Using a CSS style attribute -->
<rect width="250" height="110"
      style="fill:green;stroke:darkgray;stroke-width:5" />

<!-- Using presentation attributes -->
<rect width="250" height="110"
      fill="green" stroke="darkgray" stroke-width="5" />

Präsentationsattribute sind praktisch und gut lesbar, haben jedoch die niedrigste Priorität: Jede übereinstimmende CSS-Regel (in einem Stylesheet oder einem style-Attribut) überschreibt sie. Verwenden Sie Präsentationsattribute für einfache, statische Formen und CSS, wenn Sie Stile wiederverwenden oder bei Hover ändern möchten. Weitere Informationen zu Rahmen finden Sie unter SVG-Konturierung.

Beispiel des SVG-Elements <rect> mit den Attributen x und y:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250">
      <rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Probier es selbst »

Erklären wir den obigen Code:

  • Das Attribut x gibt die linke Position des Rechtecks an.
  • Das Attribut y gibt die obere Position des Rechtecks an.
  • Standardmäßig werden x und y auf 0 gesetzt, wenn sie weggelassen werden.
  • Die CSS-Eigenschaft fill-opacity gibt die Deckkraft der Füllfarbe an.
  • Die CSS-Eigenschaft stroke-opacity gibt die Deckkraft der Konturfarbe an.

Beispiel des SVG-Elements <rect> mit der CSS-Eigenschaft opacity:

<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
      Sorry, inline SVG is not supported by your browser.  
    </svg>
  </body>
</html>
Probier es selbst »

Erklären wir den obigen Code:

  • Die CSS-Eigenschaft opacity legt die Transparenz des gesamten Rechtecks fest — sowohl Füllung als auch Kontur gemeinsam — wobei 1 vollständig undurchsichtig und 0 vollständig transparent ist.
  • Dies unterscheidet sich vom vorherigen Beispiel: fill-opacity und stroke-opacity machen Füllung und Rahmen unabhängig voneinander transparent, während opacity auf das Element als Einheit angewendet wird (sodass eine überlappende Kontur und Füllung mit dem vermischt werden, was sich hinter der Form befindet, nicht miteinander).

Beispiel des SVG-Elements <rect> mit den Attributen rx und ry:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="240">
      <rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Probier es selbst »

Erklären wir den obigen Code:

  • Das Attribut rx gibt den horizontalen Radius der abgerundeten Ecken des Rechtecks an.
  • Das Attribut ry gibt den vertikalen Radius der abgerundeten Ecken des Rechtecks an.

Die rx/ry-Kopiererregel (Besonderheit): Wenn Sie nur eines dieser Attribute setzen, verwendet der Browser denselben Wert für das andere. So erzeugt rx="30" ohne ry Ecken, die in beide Richtungen um 30 abgerundet sind — genau als ob Sie rx="30" ry="30" geschrieben hätten. Um wirklich elliptische (asymmetrische) Ecken zu erhalten, müssen Sie rx und ry unterschiedliche Werte geben. Wenn keines gesetzt ist, bleiben die Ecken eckig. Jeder Radius wird zudem auf maximal die halbe Breite (rx) bzw. halbe Höhe (ry) des Rechtecks begrenzt.

Verwandte SVG-Kapitel

  • SVG-Einführung — das Element <svg>, das Koordinatensystem und viewBox.
  • SVG-Konturierung — Rahmen mit stroke, stroke-width und Strichmustern steuern.
  • SVG-Polygon — mehrseitige Formen aus einer Liste von Punkten zeichnen.
  • SVG-Referenz — alle SVG-Elemente und -Attribute an einem Ort.

Übungen

Übung
Wenn ein SVG-Rechteck rx='40' hat, aber kein ry-Attribut gesetzt ist, wie werden seine Ecken abgerundet?
Wenn ein SVG-Rechteck rx='40' hat, aber kein ry-Attribut gesetzt ist, wie werden seine Ecken abgerundet?
Was this page helpful?