SVG <rect>

SVG (Skalierbare Vektorgrafiken)<rect>Das Element wird verwendet, um Rechtecke zu zeichnen, und ist eine der üblichen Grundformen in SVG. Es ermöglicht Ihnen, Rechtecke zu zeichnen und die Position, Größe, abgerundeten Ecken und andere Stile des Rechtecks durch Festlegen von Attributen zu steuern.

Grundlegende Syntax

<rect
  x="x-coordinate"        <!-- 矩形左上角的 x 坐标 -->
  y="y-coordinate"        <!-- 矩形左上角的 y 坐标 -->
  width="width-value"     <!-- 矩形的宽度 -->
  height="height-value"   <!-- 矩形的高度 -->
  rx="rx-value"           <!-- 矩形的圆角半径（水平方向） -->
  ry="ry-value"           <!-- 矩形的圆角半径（垂直方向） -->
  fill="fill-color"       <!-- 矩形的填充颜色 -->
  stroke="stroke-color"   <!-- 矩形的描边颜色 -->
  stroke-width="width-value" <!-- 矩形的描边宽度 -->
/>

Aufschlüsselung der Attribute:

• xundyDie Attribute geben die Koordinaten der oberen linken Ecke des Rechtecks an, d. h. den Startpunkt des Rechtecks.

• widthundheightDie Attribute definieren die Breite und Höhe des Rechtecks.

• rxundryDie Attribute werden verwendet, um den Radius der abgerundeten Ecken des Rechtecks anzugeben. Wenn nurrxdann ist der Eckradius aller Ecken gleich; wenn beide gleichzeitig gesetzt werdenrxundrySie können jeweils die horizontalen und vertikalen Radien der abgerundeten Ecken angeben.

• fillDas Attribut definiert die Füllfarbe des Rechtecks.

• strokeDas Attribut definiert die Konturfarbe des Rechtecks.

• stroke-widthDas Attribut definiert die Strichbreite des Rechtecks.

Der folgende Code zeichnet ein Rechteck mit blauer Füllung, schwarzer Kontur und einer Strichbreite von 2 Pixeln. Die Koordinate der oberen linken Ecke ist (50, 50), die Breite ist 100 und die Höhe ist 80.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

Beispiel 1

Unten ist der SVG-Code:

Zum Anzeigen klicken: SVG-Datei anzeigen.

Codeanalyse:

• Die Attribute width und height des rect-Elements definieren die Höhe und Breite des Rechtecks.
• Das style-Attribut wird verwendet, um CSS-Eigenschaften zu definieren.
• Das CSS-Attribut fill definiert die Füllfarbe des Rechtecks (RGB-Wert, Farbname oder Hexadezimalwert).
• Das CSS-Attribut stroke-width definiert die Breite des Rechteckrahmens.
• Das CSS-Attribut stroke definiert die Farbe des Rechteckrahmens.

Beispiel 2

Schauen wir uns ein weiteres Beispiel an, das einige neue Attribute enthält:

Zum Anzeigen klicken:。

Codeanalyse:

• Das x-Attribut definiert die linke Position des Rechtecks (zum Beispiel definiert x="0" den Abstand vom Rechteck zum linken Rand des Browserfensters als 0px).
• Das y-Attribut definiert die obere Position des Rechtecks (zum Beispiel definiert y="0" den Abstand vom Rechteck zum oberen Rand des Browserfensters als 0px).
• Das CSS-Attribut fill-opacity definiert die Transparenz der Füllfarbe (gültiger Bereich: 0 - 1).
• Das CSS-Attribut stroke-opacity definiert die Transparenz der Konturfarbe (gültiger Bereich: 0 - 1).

Beispiel 3

Definieren Sie die Deckkraft des gesamten Elements:

Unten ist der SVG-Code:

Für Opera-Benutzer:。

• Das CSS-Attribut opacity wird verwendet, um den Transparenzwert des Elements festzulegen (Bereich: 0 bis 1).

Beispiel 4

Das letzte Beispiel erstellt ein abgerundetes Rechteck:

Unten ist der SVG-Code:

Für Opera-Benutzer:。

• Die Attribute rx und ry können abgerundete Ecken für das Rechteck erstellen.