SVG <rect> Zeichnen eines Rechtecks

Das rect-Element ist eine grundlegende Form im SVG, die zum Erstellen von Rechtecken verwendet wird, basierend auf einer Eckenposition und seiner Breite und Höhe. Es kann auch verwendet werden, um abgerundete Rechtecke zu erstellen.

Das SVG <rect>-Element repräsentiert ein Rechteck. Mit diesem Element können Sie Rechtecke mit verschiedenen Breiten, Höhen, verschiedenen Strichen (Umrissen) und Füllfarben, spitzen oder abgerundeten Ecken usw. zeichnen.

Online-Beispiel

Ein Beispiel für "rect":

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/></svg>

Die Position des Rechtecks wird durch die Eigenschaften "x" und "y" bestimmt. Denken Sie daran, dass dieser Ort relativ zur Position eines jeden umschlossenen (Eltern-)Elements ist.
Die Größe des Rechtecks wird durch die Eigenschaften "width" und "height" bestimmt.
Diese "style"-Eigenschaft ermöglicht es Ihnen, andere Stilinformationen zu setzen, wie z.B. die Farbe des Stifts und des Fills, die Breite des Stifts usw. Dies wird in anderen Texten in mehr Details erläutert.
Dies ist das generierte Rechteckbild:

Abgerundetes Rechteck

Sie können abgerundete Ecken auf Rechtecken zeichnen. Die Eigenschaften "rx" und "ry" bestimmen die Ecken der Kurven. Die "rx"-Eigenschaft bestimmt die Breite der Rundung, während die "ry"-Eigenschaft die Höhe der Rundung bestimmt. Hier sind drei Rechtecke mit "rx" und "ry" beide auf denselben Wert gesetzt5，10und15。Bitte beachten Sie die verschiedenen Größen in der Rundung.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="5"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="70"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="10"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="15"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

Der erzeugte Effekt der abgerundeten Rechtecke ist wie folgt:

In diesen Beispielen sind "rx" und "ry" in jedem Rechteck auf denselben Wert gesetzt. Wenn nur die "rx"-Eigenschaft gesetzt wird, erhält die "ry"-Eigenschaft denselben Wert wie "rx". Dies ist eine schnelle Möglichkeit, gleichmäßige Ecken zu definieren.
Dies sind zwei Rechtecke, bei denen die "rx"-Eigenschaft beide auf denselben Wert gesetzt ist10，aber die "ry"-Eigenschaft wird unterschiedlich gesetzt5und15Beispiel. Dies zeigt Ihnen das Aussehen von Rechtecken mit verschiedenen Höhen und Breiten.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

Rechteckumrandung

Sie können die SVG "stroke"-Stil-Eigenschaft verwenden, um den Rahmen (Umriss) des Rechtecks zu setzen. In diesem Beispiel wird die "stroke"-Farbe auf tiefgrün gesetzt und die Rahmenbreite auf3:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　fill:　none;
　　　　　　"
　　　　　　/></svg>

Das Aussehen des Elements im Browser ist wie folgt, wenn "rect" angezeigt wird:

Sie können auch die "style"-Eigenschaft "stroke" verwenden-dasharray macht die Rechteckkante zu einer Linie mit Pfeilen. Ein Beispiel ist:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　　　fill:　none;
　　　　　　　　　　　　"
　　　　　　　　/></svg>

Der Ausführungseffekt des folgenden Codes ist wie folgt::

Rechteckfüllung

Sie können die SVG-Füllungsstil-Eigenschaft verwenden, um Rechtecke zu füllen. Zum Beispiel können Sie durch das Setzen der "style"-Eigenschaft "fill" auf "none", wählen, Elemente nicht zu füllen.

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"　
　　　　　　　　　　　　style="stroke:　#009900;fill:　none;"　/></svg>

Das Aussehen des "rect" im Browser ohne Füllung ist wie folgt:

Sie können auch Rechtecke mit Farbe füllen. Dieses Beispiel füllt den "rect" mit einem hellen Grün:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;fill:　#33ff33;"/>
</svg>

Hier ist die Anzeige des "fill"-Effekts von "rect" im Browser:

Sie können auch die "style"-Eigenschaft "fill" verwenden-Transparenz durch "fill" macht den Füllung transparent. Dieses Beispiel zeigt zwei Rechtecke, eines davon liegt teilweise auf dem anderen, und das obere Rechteck ist halbtransparent:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　fill:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　width="100"　height="100"
　　　　　　style="stroke:　#000099;
　　　　　　　　　fill:　#3333ff;
　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　"
　　　　　　　　/></svg>

Dies ist das halbtransparente Aussehen des Elements, wenn rect im Browser dargestellt wird:

In diesem Beispiel ist der Strich der zweiten Rechtecks nicht transparent, aber Sie können die style-Eigenschaft stroke verwenden-Transparenz durch opacity erreichen.