SVG <rett>
Forme SVG
SVG ha alcuni elementi di forma predefiniti che possono essere utilizzati dagli sviluppatori:
- Rettangolo <retto>
- Cerchia <cerchio>
- Ellisse <ellisse>
- Riga <riga>
- Polilinea <polilinea>
- Poligono <poligono>
- Percorso <percorso>
I capitoli seguenti spiegheranno ogni elemento, iniziando con l'elemento retto.
Rettangolo SVG - <rect>
Esempio 1
L'elemento <rect> viene utilizzato per creare un rettangolo e variazioni di una forma rettangolare:
Ecco il codice SVG:
Esempio
<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>
Spiegazione del codice:
- Gli attributi di larghezza e altezza dell'elemento <rect> definiscono l'altezza e la larghezza del rettangolo
- L'attributo style viene utilizzato per definire le proprietà CSS per il rettangolo
- La proprietà di riempimento CSS definisce il colore di riempimento del rettangolo
- La proprietà CSS stroke-width definisce la larghezza del bordo del rettangolo
- La proprietà del tratto CSS definisce il colore del bordo del rettangolo
Esempio 2
Diamo un'occhiata a un altro esempio che contiene alcuni nuovi attributi:
Ecco il codice SVG:
Esempio
<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>
Spiegazione del codice:
- L'attributo x definisce la posizione a sinistra del rettangolo (es. x="50" posiziona il rettangolo a 50 px dal margine sinistro)
- L'attributo y definisce la posizione in alto del rettangolo (es. y="20" posiziona il rettangolo a 20 px dal margine superiore)
- La proprietà CSS fill-opacity definisce l'opacità del colore di riempimento (intervallo legale: da 0 a 1)
- La proprietà CSS stroke-opacity definisce l'opacità del colore del tratto (intervallo legale: da 0 a 1)
Esempio 3
Definisci l'opacità per l'intero elemento:
Ecco il codice SVG:
Esempio
<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>
Spiegazione del codice:
- La proprietà CSS opacity definisce il valore di opacità per l'intero elemento (intervallo legale: da 0 a 1)
Esempio 4
Ultimo esempio, crea un rettangolo con gli angoli arrotondati:
Ecco il codice SVG:
Esempio
<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>
Spiegazione del codice:
- Gli attributi rx e ry arrotondano gli angoli del rettangolo