SVG-Rechteck

Beschreibung des `<rect>`-Elements

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

Beispiel für das SVG `<rect>`-Element:

Beispiel für das SVG <rect>-Element:

html

<!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>

Try it Yourself »

Erklären wir nun diesen Code:

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

Beispiel für das SVG `<rect>`-Element mit den x- und y-Attributen:

Beispiel für das SVG <rect>-Element mit den x- und y-Attributen

html

<!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>

Try it Yourself »

Erklären wir den obigen Code:

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

Beispiel für das SVG `<rect>`-Element mit der CSS opacity-Eigenschaft:

Beispiel für das SVG <rect>-Element mit der CSS opacity-Eigenschaft

html

<!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>

Try it Yourself »

Beispiel für das SVG `<rect>`-Element mit den rx- und ry-Attributen:

Beispiel für das SVG <rect>-Element mit den rx- und ry-Attributen

html

<!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>

Try it Yourself »

Erklären wir den obigen Code:

Das Attribut rx legt den horizontalen Radius der abgerundeten Ecken des Rechtecks fest.
Das Attribut ry legt den vertikalen Radius der abgerundeten Ecken des Rechtecks fest.

Praxis

Welche Attribute können für SVG-Rechtecke in HTML angegeben werden?

'x' und 'y', um den Startpunkt festzulegen'width' und 'height', um die Größe festzulegen'color' und 'background-color', um das Aussehen zu definieren'rx' und 'ry', um die Ecken abzurunden'src' und 'alt' für Bildreferenz und Barrierefreiheit

SVG-Rechteck ​

Beschreibung des <rect>-Elements ​

Beispiel für das SVG <rect>-Element: ​

Beispiel für das SVG <rect>-Element mit den x- und y-Attributen: ​

Beispiel für das SVG <rect>-Element mit der CSS opacity-Eigenschaft: ​

Beispiel für das SVG <rect>-Element mit den rx- und ry-Attributen: ​

Praxis ​

SVG-Rechteck

Beschreibung des `<rect>`-Elements

Beispiel für das SVG `<rect>`-Element:

Beispiel für das SVG `<rect>`-Element mit den x- und y-Attributen:

Beispiel für das SVG `<rect>`-Element mit der CSS opacity-Eigenschaft:

Beispiel für das SVG `<rect>`-Element mit den rx- und ry-Attributen:

Praxis