Disegnare un rettangolo con SVG <rect>

L'elemento rect è una forma di base di SVG, utilizzata per creare rettangoli basati su una posizione angolare e le sue dimensioni di larghezza e altezza. Può anche essere utilizzato per creare rettangoli arrotondati.

L'elemento <rect> di SVG rappresenta un rettangolo. Utilizzando questo elemento, è possibile disegnare rettangoli con diverse larghezze, altezze, colori di tratto (contorno), colori di riempimento, angoli appuntiti o arrotondati, ecc.

Esempio online

Esempio di utilizzo di 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>

La posizione del rettangolo è determinata dalle proprietà x e y. Ricorda che questa posizione è rispetto alla posizione di qualsiasi elemento chiuso (padre).
La dimensione del rettangolo è determinata dalle proprietà width e height.
La proprietà style consente di impostare altre informazioni di stile, come il colore del tratto e del riempimento, la larghezza del tratto, ecc. Questo verrà illustrato in modo più dettagliato in altri testi.
Questa è l'immagine del rettangolo generato:

Rettangolo arrotondato

È possibile disegnare angoli arrotondati sui rettangoli. Le proprietà rx e ry determinano l'arrotondamento degli angoli. La proprietà rx determina la larghezza arrotondata, mentre la proprietà ry determina l'altezza arrotondata. Ci sono tre rettangoli con rx e ry impostati rispettivamente a 5, 10 e 15. Notare le diverse dimensioni arrotondate.

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

L'effetto del rettangolo arrotondato generato è il seguente:

In questi esempi, per ogni rettangolo, i valori di rx e ry sono impostati allo stesso modo. Se viene impostata solo la proprietà rx, la proprietà ry riceverà lo stesso valore di rx. Questo è un modo rapido per definire angoli arrotondati uniformi.
Questo è un esempio di due rettangoli che hanno entrambi l'attributo rx impostato a 10, ma con l'attributo ry impostato rispettivamente a 5 e 15. Questo ti mostrerà l'aspetto dei rettangoli arrotondati a diverse altezze e larghezze.

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

Contorno del rettangolo

Puoi utilizzare lo stile stroke di SVG per impostare lo stile del bordo (contorno) del rettangolo. In questo esempio, il colore di stroke è verde scuro e la larghezza del bordo è impostata a 3:

<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: #009900;
　　　　　　"
　　　　　　</svg>

Ecco l'aspetto dell'elemento visualizzato nel browser per rect:

Puoi anche utilizzare lo stile stroke-dasharray per rendere il bordo del rettangolo tratteggiato. Esempio di seguito:

<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: #009900;
　　　　　　　　　　　　"
　　　　　　　　</svg>

L'effetto di esecuzione del codice sopra è il seguente::

Riempimento del rettangolo

Puoi utilizzare lo stile di riempimento SVG per riempire il rettangolo. Ad esempio, puoi scegliere di non riempire l'elemento impostando lo stile fill su none.

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

Ecco l'aspetto dell'elemento senza riempimento visualizzato nel browser per rect:

Puoi anche scegliere di riempire il rettangolo con un colore. Questo esempio utilizza un verde brillante per riempire l'elemento rect:

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

Di seguito è riportato l'effetto di riempimento visualizzato nel browser per rect:

Puoi anche utilizzare lo stile fill-opacity per rendere il riempimento trasparente. Questo esempio mostra due rettangoli, uno dei quali è parzialmente sovrapposto sull'altro, e il rettangolo superiore è semi-trasparente:

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

Ecco l'aspetto semi-trasparente dell'elemento quando rect viene visualizzato nel browser:

In questo esempio, il tratto del secondo rettangolo non è trasparente, ma puoi usarne lo stile proprietario stroke-opacity per renderlo trasparente.