SVG <rect>

Forme SVG

SVG offre alcuni elementi di forma predefiniti che i sviluppatori possono utilizzare:

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

I prossimi capitoli inizieranno con l'elemento rect per spiegare ogni elemento.

SVG rettangolo - <rect>

Esempio 1

<rect> L'elemento viene utilizzato per creare rettangoli e varianti di forme rettangolari:

Questo è il codice SVG:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Prova personalmente

Spiegazione del codice:

• Gli attributi width e height dell'elemento <rect> definiscono l'altezza e la larghezza del rettangolo
• L'attributo style viene utilizzato per definire gli attributi CSS del rettangolo
• L'attributo fill CSS definisce il colore di riempimento del rettangolo
• L'attributo border-width CSS definisce la larghezza del contorno del rettangolo
• L'attributo stroke CSS definisce il colore del contorno del rettangolo

Esempio 2

Vediamo un altro esempio che contiene nuovi attributi:

Questo è il codice SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Prova personalmente

Spiegazione del codice:

• L'attributo x definisce la posizione sinistra del rettangolo (ad esempio x="50" posiziona il rettangolo a 50 px di distanza dal margine sinistro)
• L'attributo y definisce la posizione superiore del rettangolo (ad esempio y="20" posiziona il rettangolo a 20 px di distanza dal margine superiore)
• L'attributo fill-opacity CSS definisce l'opacità del colore di riempimento (intervallo legittimo: 0 a 1)
• L'attributo border-opacity CSS definisce l'opacità del colore del contorno (intervallo legittimo: 0 a 1)

Esempio 3

Definire l'opacità dell'elemento intero:

Questo è il codice SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Prova personalmente

Spiegazione del codice:

• L'attributo opacity CSS definisce il valore di opacità dell'elemento intero (intervallo legittimo: 0 a 1)

Esempio 4

Ultimo esempio, creazione di un rettangolo arrotondato:

Questo è il codice SVG:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Prova personalmente

Spiegazione del codice:

• Le proprietà rx e ry arrotondano gli angoli del rettangolo