SVG <rect>

SVG ha alcuni elementi di forma predefiniti che possono essere utilizzati e manipolati dagli sviluppatori.

Forme SVG

SVG ha alcuni elementi di forma predefiniti che possono essere utilizzati e manipolati dagli sviluppatori:

  • Rettangolo <rect>
  • Cerchio <circle>
  • Ellisse <ellipse>
  • Linea <line>
  • Linea <polyline>
  • Poligono <polygon>
  • Percorso <path>

Le sezioni seguenti ti spiegheranno questi elementi, iniziando dal rettangolo.

Il tag <rect>

Il tag <rect> può essere utilizzato per creare rettangoli e le loro varianti.

Per comprendere il funzionamento, copia questi codici in un blocco note e salvali come file "rect1.svg". Metti questo file nella directory web:

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

Spiegazione del codice:

  • Le proprietà width e height dell'elemento rect possono definire l'altezza e la larghezza del rettangolo
  • L'attributo style viene utilizzato per definire gli attributi CSS
  • L'attributo fill della CSS definisce il colore di riempimento del rettangolo (valori rgb, nomi di colore o valori esadecimali)
  • L'attributo stroke-width della CSS definisce la larghezza del contorno del rettangolo
  • L'attributo stroke della CSS definisce il colore del contorno del rettangolo

Visualizza questo esempio

Vediamo un altro esempio che contiene nuovi attributi:

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

Esempio di spiegazione:

  • L'attributo x definisce la posizione sinistra del rettangolo (ad esempio, x="0" definisce che la distanza del rettangolo dal margine sinistro della finestra del browser è 0px)
  • L'attributo y definisce la posizione superiore del rettangolo (ad esempio, y="0" definisce che la distanza del rettangolo dal margine superiore della finestra del browser è 0px)
  • L'attributo fill-opacity della CSS definisce la trasparenza del colore di riempimento (l'intervallo legittimo è: 0 - 1)
  • L'attributo stroke-opacity della CSS definisce la trasparenza del colore del contorno (l'intervallo legittimo è: 0 - 1)

Visualizza esempio

Definire la trasparenza per l'elemento intero:

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

Spiegazione del codice:

L'attributo opacity della CSS definisce il valore di trasparenza dell'intero elemento (l'intervallo legittimo è: 0 - 1)

Visualizza esempio

Ultimo esempio, creare un rettangolo arrotondato:

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

Spiegazione del codice:

Le proprietà rx e ry possono fare arrotondare i rettangoli.

Visualizza esempio