SVG <rect>

SVG hat einige vorgegebene Formenelemente, die von Entwicklern verwendet und manipuliert werden können.

SVG-Formen

SVG hat einige vorgegebene Formenelemente, die von Entwicklern verwendet und manipuliert werden können:

  • Rechteck <rect>
  • Kreis <circle>
  • Oval <ellipse>
  • Linie <line>
  • Zickzack <polyline>
  • Dreieck <polygon>
  • Pfad <path>

Die folgenden Kapitel erläutern diese Elemente, beginnend mit dem Rechteckselement.

Das <rect>-Element

Das <rect>-Element kann verwendet werden, um Rechtecke und ihre Varianten zu erstellen.

Um das Funktionsprinzip zu verstehen, kopieren Sie diesen Code in ein Textverarbeitungsprogramm und speichern Sie ihn als "rect1.svg"-Datei. Legen Sie diese Datei in den Web-Ordner:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

Code-Explainierung:

  • Die Attribute width und height des rect-Elements können die Höhe und Breite des Rechtecks definieren
  • Die Eigenschaft style wird verwendet, um CSS-Eigenschaften zu definieren
  • Die Eigenschaft fill definiert die Füllfarbe des Rechtecks (rgb-Werte, Farbname oder Hexadezimalwert)
  • Die CSS-Eigenschaft stroke-width definiert die Breite des Rechtecksrahmens
  • Die CSS-Eigenschaft stroke definiert die Farbe des Rechtecksrahmens

Diesen Beispiel anzeigen

Lassen Sie uns einen anderen Beispiel mit neuen Eigenschaften betrachten:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Beispiel erläutern:

  • Die Eigenschaft x definiert die linke Position des Rechtecks (z.B., x="0" bedeutet, dass der Abstand des Rechtecks zum linken Rand des Browserfensters 0px beträgt)
  • Die Eigenschaft y definiert die obere Position des Rechtecks (z.B., y="0" bedeutet, dass der Abstand des Rechtecks zum oberen Rand des Browserfensters 0px beträgt)
  • Die CSS-Eigenschaft fill-opacity definiert die Transparenz der Füllfarbe (gültiger Bereich: 0 - 1)
  • Die CSS-Eigenschaft stroke-opacity definiert die Transparenz der Stiftfarbe (gültiger Bereich: 0 - 1)

Beispiel anzeigen

Transparenz für den gesamten Element festlegen:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

Code-Explainierung:

Die CSS-Eigenschaft opacity definiert den Transparenzwert eines gesamten Elements (gültiger Bereich: 0 - 1)

Beispiel anzeigen

Letztes Beispiel, Erstellung eines Rechtecks mit abgerundeten Ecken:

?xml version="1.0" standalone="no"?>
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

Code-Explainierung:

Die Eigenschaften rx und ry ermöglichen es, Rechtecke mit Ecken zu erzeugen.

Beispiel anzeigen