SVG <Rechteck>

SVG-Formen

SVG hat einige vordefinierte Formelemente, die von Entwicklern verwendet werden können:

• Rechteck <Rechteck>
• Kreisen Sie <Kreis> ein
• Ellipse <Ellipse>
• Zeile <Zeile>
• Polylinie <Polylinie>
• Polygon <Polygon>
• Pfad <Pfad>

Die folgenden Kapitel erklären jedes Element, beginnend mit dem Element rect.

SVG-Rechteck - <Rechteck>

Beispiel 1

Das Element <rect> wird verwendet, um ein Rechteck und Variationen einer Rechteckform zu erstellen:

Hier ist der SVG-Code:

Code-Erklärung:

• Die Attribute width und height des Elements <rect> definieren die Höhe und die Breite des Rechtecks
• Das style-Attribut wird verwendet, um CSS-Eigenschaften für das Rechteck zu definieren
• Die CSS-Eigenschaft fill definiert die Füllfarbe des Rechtecks
• Die CSS-Eigenschaft stroke-width definiert die Breite des Rahmens des Rechtecks
• Die CSS-Eigenschaft stroke definiert die Farbe des Rahmens des Rechtecks

Beispiel 2

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

Hier ist der SVG-Code:

Code-Erklärung:

• Das x-Attribut definiert die linke Position des Rechtecks ​​(z. B. x="50" platziert das Rechteck 50 px vom linken Rand entfernt)
• Das Attribut y definiert die obere Position des Rechtecks ​​(zB y="20" platziert das Rechteck 20 px vom oberen Rand)
• Die CSS-Eigenschaft fill-opacity definiert die Deckkraft der Füllfarbe (zulässiger Bereich: 0 bis 1)
• Die CSS-Eigenschaft stroke-opacity definiert die Deckkraft der Strichfarbe (zulässiger Bereich: 0 bis 1)

Beispiel 3

Definieren Sie die Deckkraft für das gesamte Element:

Hier ist der SVG-Code:

Code-Erklärung:

• Die CSS-Eigenschaft opacity definiert den Deckkraftwert für das gesamte Element (zulässiger Bereich: 0 bis 1)

Beispiel 4

Erstellen Sie als letztes Beispiel ein Rechteck mit abgerundeten Ecken:

Hier ist der SVG-Code:

Code-Erklärung:

• Die Attribute rx und ry runden die Ecken des Rechtecks ​​ab