SVG <Rect>

SVG-Formen

SVG hat einige vordefinierte Form-Elemente, die von Entwicklern verwendet werden können:

• Rectangle <rect>
• Kreis <circle>
• Ellipse <ellipse>
• Zeile <line>
• Linienzug <polyline>
• Polygon <polygon>
• Pfad <path>

In den folgenden Kapiteln werden die einzelnen Elemente zu erklären, mit dem rect Element beginnen.

SVG Rectangle - <rect>

Beispiel 1

Das <rect> Element wird verwendet , um ein Rechteck und Variationen eines Rechtecks Form zu erstellen:

Hier ist der SVG-Code:

Code explanation:

• Die Breite und Höhe Attribute des <rect> Element definieren die Höhe und die Breite des Rechtecks
• Der style - Attribut wird verwendet , CSS - Eigenschaften für das Rechteck zu definieren ,
• Die CSS-fill Eigenschaft definiert die Füllfarbe des Rechtecks
• Die CSS-stroke-width Eigenschaft definiert die Breite der Rand des Rechtecks
• Die CSS-Hub Eigenschaft definiert die Farbe der Grenze des Rechtecks

Beispiel 2

Nehmen wir ein anderes Beispiel, das einige neue Attribute enthält:

Hier ist der SVG-Code:

Code explanation:

• Die x - Attribut definiert die linke Position des Rechtecks (zB x = "50" stellt das Rechteck 50 Pixel vom linken Rand)
• Die y - Attribut definiert die obere Position des Rechtecks (zB y = "20" stellt das Rechteck 20 Pixel vom oberen Rand)
• Die CSS - fill-Opazität Eigenschaft definiert die Opazität der Füllfarbe (legal range: 0 to 1)
• Die CSS - Hub-Opazität Eigenschaft definiert die Opazität des Strichfarbe (legal range: 0 to 1)

Beispiel 3

Definieren Sie die Opazität für das gesamte Element:

Hier ist der SVG-Code:

Code explanation:

• Die CSS - Opazität Eigenschaft definiert die Durchlässigkeitswert für das gesamte Element (legal range: 0 to 1)

Beispiel 4

Last beispielsweise ein Rechteck mit abgerundeten Ecken zu erstellen:

Hier ist der SVG-Code:

Code explanation:

• Die rx und die ry Attribute rundet die Ecken des Rechtecks