SVG <rect>

SVG-Formen

SVG bietet einige vorgegebene Formenelemente, die Entwickler verwenden können:

• Rechteck <rect>
• Kreis <circle>
• Ovale <ellipse>
• Gerade <line>
• Bogen <polyline>
• Dreieck <polygon>
• Pfad <path>

Die folgenden Kapitel beginnen mit der Erklärung jedes Elements am rect-Element.

SVG-Rechteck - <rect>

Beispiel 1

<rect> Das Element wird verwendet, um Rechtecke und Variationen von Rechteckformen zu erstellen:

Dies ist ein SVG-Code:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

</svg>

Probieren Sie es selbst aus

• Die width- und height-Attribute des <rect>-Elements definieren die Höhe und Breite des Rechtecks
• Die style-Eigenschaft wird verwendet, um die CSS-Eigenschaften des Rechtecks zu definieren
• Die CSS-Fill-Eigenschaft definiert die Füllfarbe des Rechtecks
• Die CSS-Border-Width-Eigenschaft definiert die Breite des Randes des Rechtecks
• Die CSS-Stroke-Eigenschaft definiert die Randfarbe des Rechtecks

Beispiel 2

Lassen Sie uns einen anderen Beispiel mit neuen Eigenschaften sehen:

Dies ist ein SVG-Code:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />

</svg>

Probieren Sie es selbst aus

• Die x-Eigenschaft definiert die linke Position des Rechtecks (z.B. x="50" platziert das Rechteck 50 px von der linken Außenmarke entfernt)
• Die y-Eigenschaft definiert die obere Position des Rechtecks (z.B. y="20" platziert das Rechteck 20 px von der oberen Außenmarke entfernt)
• Die CSS-Fill-Opacity-Eigenschaft definiert die Durchsichtigkeit der Füllfarbe (gültiger Bereich: 0 bis 1)
• Die CSS-Stroke-Opacity-Eigenschaft definiert die Durchsichtigkeit der Stiftfarbe (gültiger Bereich: 0 bis 1)

Beispiel 3

Definiert die Durchsichtigkeit eines gesamten Elements:

Dies ist ein SVG-Code:

<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" />

</svg>

Probieren Sie es selbst aus

• Die CSS-Opacity-Eigenschaft definiert den Durchsichtigkeitswert eines gesamten Elements (gültiger Bereich: 0 bis 1)

Beispiel 4

Letzter Beispiel, Erstellen eines Rechtecks mit abgerundeten Ecken:

Dies ist ein SVG-Code:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

Probieren Sie es selbst aus

• Code-Explainierung: