SVG Rechteck

SVG-Formen

SVG hat einige vordefinierte Formelemente, kann von Entwicklern verwendet werden, zu verwenden und zu betreiben:

• Rectangle <rect>
• Rund <Kreis>
• Oval <Ellipse>
• Zeile <line>
• Linienzug <Polylinie>
• Polygon <Polygon>
• Pfad <Pfad>

In den folgenden Abschnitten werden Ihnen diese Elemente erklären, aus einem rechteckigen Element beginnen.

SVG Rechteck - <rect>

Beispiel 1

<Rect> -Tag wird verwendet, um ein Rechteck zu erstellen, und eine rechteckige Variante:

Hier ist der SVG-Code:

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

-Code - Analyse:

• Breite und Höhe Attribute rect Elemente, die die Höhe und Breite des Rechtecks ​​definieren,
• Stil-Eigenschaft wird verwendet CSS-Eigenschaften zu definieren,
• CSS fill Eigenschaft definiert das Rechteck füllen Farbe (RGB-Werte, Farbname oder hexadezimalen Wert)
• Breite stroke-width CSS-Eigenschaft definiert den rechteckigen Rahmen
• Die Strichfarbe CSS-Eigenschaft definiert den rechteckigen Rahmen

Beispiel 2

Lassen Sie uns ein anderes Beispiel an, es enthält eine Reihe neuer Eigenschaften:

Hier ist der SVG-Code:

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

-Code - Analyse:

• X Attribut definiert die linke Position des Rechtecks ​​(beispielsweise x = "0", um das Rechteck auf der linken Seite des Browser-Fenster zu definieren, wobei der Abstand ist 0px)
• y Attribut Top-Position definiert das Rechteck (beispielsweise y = "0" aus der Definition des Rechtecks ​​an die Spitze des Browser-Fensters ist 0px)
• CSS die Fill-Opazität Eigenschaft definiert die Transparenz der Füllfarbe (Rechtsbereich: 0--1)
• Die CSS-Hub-Opazität Eigenschaft definiert die Transparenz der Strichfarbe (Rechtsbereich: 0--1)

Beispiel 3

Definieren Sie die Undurchsichtigkeit des gesamten Elements:

Hier ist der SVG-Code:

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

• CSS Opazität Eigenschaft definiert den Wert des transparenten Elements (Bereich: 0-1).

Beispiel 4

Das letzte Beispiel, erstellen Sie ein Rechteck mit abgerundeten Ecken:

Hier ist der SVG-Code:

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

• rx und ry Attribute können Rechteck mit abgerundeten Ecken erzeugen.