Grafica vettoriale con SVG - Seconda parte

di Cristian Civera, in HTML5,


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.

ComandoDescrizioneParametri
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 1

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.

4 pagine in totale: 1 2 3 4
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

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

Misc