SVG forme
SVG ha alcuni elementi di forma predefiniti che possono essere utilizzati dagli sviluppatori:
- Rettangolo <rect>
- Circle <circle>
- Ellisse <ellipse>
- Linea <line>
- Polilinea <polyline>
- Poligono <polygon>
- Percorso <path>
I capitoli seguenti spiegheranno ogni elemento, a cominciare con l'elemento rect.
SVG Rettangolo - <rect>
esempio 1
Il <rect> elemento viene utilizzato per creare un rettangolo e le variazioni di una forma di rettangolo:
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>
Prova tu stesso " Code explanation:
- Gli attributi di larghezza e altezza del <rect> elemento definiscono l'altezza e la larghezza del rettangolo
- Lo style attributo 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 corsa-width definisce la larghezza del bordo del rettangolo
- La proprietà ictus 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>
Prova tu stesso " Code explanation:
- La x attributo definisce la posizione a sinistra del rettangolo (ad esempio x = "50" pone il rettangolo di 50 px dal margine di sinistra)
- Il y attributo definisce la posizione superiore del rettangolo (ad esempio y = "20" pone il rettangolo di 20 px dal margine superiore)
- La proprietà CSS fill-opacità definisce l'opacità del colore di riempimento (legal range: 0 to 1)
- La proprietà CSS corsa-opacità definisce l'opacità del colore del tratto (legal range: 0 to 1)
esempio 3
Definire 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>
Prova tu stesso " Code explanation:
- La proprietà CSS opacità definisce il valore di opacità per l'intero elemento (legal range: 0 to 1)
esempio 4
Ultimo esempio, creare 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>
Prova tu stesso " Code explanation:
- La RX e ry attributi arrotonda gli angoli del rettangolo