Grafica vettoriale con SVG - Seconda parte
Questo articolo è tratto dal capitolo 4 ("Grafica avanzata con SVG e Canvas") del libro HTML5 Espresso, di Daniele Bochicchio, Cristian Civera, Matteo Casati, Riccardo Golia, Stefano Mostarda (Hoepli, 2011)
Acquista subito la tua copia ad un prezzo vantaggioso!
Per una panoramica introduttiva sul formato SVG puoi leggere il precedente articolo.
L'elemento path
L’elemento path è l’oggetto che maggiormente ci troviamo a utilizzare, perché molto versatile e permette di disegnare una figura con dei comandi che indichino a un’immaginaria penna di spostarsi, disegnare una linea e così via. L’attributo d, infatti, permette di indicare una serie di comandi, raccolti nella tabella 4.2, ognuno dei quali lavora in funzione del comando precedente.
4.2 - I comandi messi a disposizione dall’elemento path.
| Comando | Descrizione | Parametri |
|---|---|---|
| M | Sposta la penna in un punto, senza disegnare. | x,y |
| L | Disegna una linea dal punto attuale a quello indicato. | x,y |
| H | Disegna una linea orizzontale dal punto attuale alla x indicata. | x |
| V | Disegna una linea verticale dal punto attuale alla y indicata. | y |
| C | Disegna una curva di bezier verso il punto x,y dove i punti x1,y1 e x2,y2 sono il punto di inizio e di fine. | x1,y1 x2,y2 x,y |
| S | Disegna una curva di bezier verso il punto x,y dove x2,y2 è il punto di inizio e di fine. | x2,y2 x,y |
| Q | Disegna una bezier quadratica tra il punto x,y e x1,y1. | x1,y1 x,y |
| T | Disegna una bezier quadratica tra il punto x,y e la posizione attuale. | x,y |
| A | Disegna un arco dal punto attuale verso x,y. | x,y |
| z | Chiude la figura con una linea dal punto attuale al primo punto. |
[...] — esempio omesso: creazione di un grafico a torta.
Inserire elementi testuali
All’interno di figure spesso possiamo ritrovare informazioni testuali che, sebbene possano essere raffigurate con degli shape, non avrebbero significato dal punto di vista del markup, per l’utente che voglia selezionare il testo e copiarlo, oppure per un eventuale spider che debba analizzare l’immagine.
Per questo motivo, in SVG abbiamo a disposizione l’elemento text che al suo interno può contenere del testo formattato e dimensionato. Rispetto all’HTML5 inoltre, permette di cambiare le posizioni e la rotazione di ogni carattere.
Vediamo quindi come utilizzare questo elemento, usando alcune delle caratteristiche principali di questo tag.
Esempio 4.7
<svg width="200" height="150">
<text x="10" y="20"
font-family="Verdana"
font-size="30"
dx="2,0,0" dy="8,-6,-3"
rotate="-25,0,25">
SVG
</text>
</svg>Nell’esempio 4.7 ci sono molteplici attributi in uso:
- x e y per indicare le coordinate dell’angolo basso/sinistro da cui partire;
- font-size e font-family per indicare la dimensione e il tipo di carattere;
- dx e dy per indicare a ogni lettera di quanti pixel spostarsi, in x e in y;
- rotate per indicare di quanto deve ruotare ogni lettera.
In pratica diciamo che la lettera “S” deve essere spostata rispetto al punto di inizio di 2,8 pixel e ruotata di -25 gradi. La “V” invece viene alzata di 6 pixel, mentre la G alzata di 3 pixel e ruotata di 25 gradi. Così facendo otteniamo la scritta visibile nella figura 4.5.
Figura 4.5 – Testo con manipolazione dei caratteri ottenuta con SVG.
L’aspetto interessante è che il testo è selezionabile con tutte le operazioni che ne derivano
[...] — omesso: controllo del testo.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Le novità di Angular: i miglioramenti alla CLI
Generare la software bill of material (SBOM) in GitHub
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Miglioramenti nelle performance di Angular 16
Disabilitare automaticamente un workflow di GitHub
Generare un hash con SHA-3 in .NET
Gestire domini wildcard in Azure Container Apps
Gestire il colore CSS con HWB
Creare una libreria CSS universale: Clip-path
Routing statico e PreRendering in una Blazor Web App
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Applicare un filtro per recuperare alcune issue di GitHub
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Recuperare App Service cancellati su Azure
- Utilizzare la classe Lock per acquisire un lock
- Escludere alcuni file da GitHub Secret Scanning
- Creare una libreria CSS universale - Rotazione degli elementi
- Aggiornare a .NET 9 su Azure App Service
- Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub