Share
Va da sé che SVG non è così ampiamente utilizzato come molte persone nella comunità di sviluppo web potrebbero credere che dovrebbe essere. Mettendo da parte il dibattito, in questo tutorial illustrerò come utilizzare gli SVG in linea, coprendo una gamma di tecniche e esplorando l'interazione tra pagina web e grafica. Se utilizzato in combinazione con altri standard emergenti in HTML5, JavaScript e CSS3, gli SVG in linea possono aggiungere in modo significativo all'esperienza utente.
Puoi interagire con gli elementi SVG usando le tecniche DOM, come faresti con altri elementi della pagina web.
In questo tutorial, lavoreremo attraverso un esempio pratico di un SVG in linea creando un componente semplice che rappresenta un mazzo di record. Il disco girerà e l'utente sarà in grado di interagire con esso, premendo per rallentarlo e rilasciando per accelerarlo di nuovo. SVG conterrà anche un pulsante su cui gli utenti possono fare clic per modificare il record, facendo in modo che il suo aspetto si modifichi leggermente. Gli elementi SVG visibili verranno migliorati con sfumature e filtri ombra.
Guarda ora la demo per avere un'idea chiara di cosa stiamo costruendo.
Come probabilmente saprai, gli SVG incorporati rientrano negli standard HTML5 emergenti, quindi il codice che utilizzeremo in questo tutorial non sarà completamente supportato su tutti i browser. Sebbene gli SVG in linea siano teoricamente supportati in tutte le versioni correnti dei principali browser, le animazioni interne e gli effetti interattivi che useremo non sono ancora supportati così bene. Il risultato finale dovrebbe funzionare correttamente nelle versioni correnti di Firefox, Chrome e Opera. Come sempre con le tecniche HTML5, assicurati di non fare affidamento su questi effetti in nessun sito live su cui lavori, e includi alternative dove possibile.
Cerchiamo di scavare e iniziare creando un profilo di pagina HTML5, in questo modo:
Uno dei principali vantaggi dell'utilizzo di SVG è la sua scalabilità. Per sfruttare questo, useremo principalmente valori relativi per definire il contenuto SVG. Aggiungi un elemento contenitore per SVG nel corpo della pagina:
Per vedere come l'SVG si trova all'interno dell'elemento contenitore, aggiungi quanto segue alla sezione dello stile nel tuo capo pagina:
#picHolder background: #dedeff; border: 1px solid # 666666;
Nell'elemento contenitore nel corpo della pagina, aggiungi il contorno dell'elemento SVG, come segue:
Abbiamo impostato la larghezza e l'altezza al 100%, poiché stiamo specificando la larghezza dell'elemento contenitore. Tuttavia, anziché specificare esplicitamente le dimensioni, utilizzeremo invece una funzione JavaScript per rivelare la facilità con cui puoi scalare l'SVG in su e in giù. Puoi includere larghezza e altezza fisse nel tag SVG di apertura o nella sezione di stile.
Le forme visibili nel grafico saranno definite all'interno dell'elemento SVG. Prima di questo lavoreremo su defs sezione. Il defs la sezione è dove posizioni le definizioni a cui puoi riferirti in seguito quando crei le tue forme. Per questo tutorial, il defs la sezione conterrà le definizioni per alcuni riempimenti sfumati e un paio di ombre esterne. Aggiungi questa nuova sezione all'interno dell'elemento SVG:
Gli oggetti che inseriamo in questa sezione non appariranno effettivamente nell'immagine, ma saranno usati come riempimenti e filtri per le forme che fanno. Includeremo diversi riempimenti sfumati; quindi lavoriamo attraverso ognuno di essi a turno.
Il primo è un gradiente lineare:
Questo gradiente verrà specificato come riempimento per l'area del rettangolo di sfondo. Il x1 e Y1 gli attributi rappresentano i punti di partenza del gradiente all'interno della forma piena, con il gradiente che si estende da lì al punto rappresentato da x2 e y2. In questo caso, il gradiente verrà eseguito dall'alto verso il basso. Gli elementi di stop rappresentano i punti di colore nel gradiente. Il primo indica che il 10% dall'inizio del gradiente sarà di un colore rosso scuro uniforme e il secondo stop del 90% rispetto alla fine del gradiente sarà di colore giallo. Tra questi due punti, il gradiente mescolerà i colori l'uno nell'altro. Entrambi i colori hanno piena opacità.
Quindi aggiungiamo un gradiente per il record stesso. Questo è un po 'più complesso - è un gradiente radiale con diverse interruzioni di colore:
Un gradiente radiale inizia dall'interno del cerchio, con le parti più interne e più esterne del cerchio definito da cx, cy, fx e fy, elencato accanto al raggio. In questo caso, il gradiente radiale occuperà l'intera forma di registrazione circolare. Il grosso del disco sarà nero, con due anelli di colore leggermente più chiaro che rappresentano le sezioni più lisce al centro del disco e i suoi bordi. Metteremo anche un'etichetta sul disco al suo centro, quindi la prima porzione di colore più chiaro sul disco apparirà appena fuori. Aggiungi il riempimento sfumatura etichetta successivo:
Questo è un gradiente lineare semplice che verrà utilizzato come riempimento per l'etichetta circolare. Tuttavia, nota che l'ID del gradiente ha uno zero alla fine. Ciò è dovuto al fatto che aggiungeremo una funzione interattiva, consentendo all'utente di "modificare il record". Una funzione JavaScript passerà da una gamma di riempimenti sfumati per l'elemento etichetta. A questo scopo, aggiungi un altro paio di gradienti:
I gradienti hanno ciascuno un ID che termina con un intero incrementale, in modo che possiamo scorrere attraverso di loro in JavaScript. Ora, definisci un altro gradiente per creare un effetto brillante sopra il record:
Questa volta, il gradiente utilizza interruzioni di colore opache e trasparenti alfa; l'effetto sarà un sottile risalto nel disco. Infine, abbiamo bisogno di un riempimento metallico per il pulsante e il mandrino:
Questa volta, il gradiente radiale è leggermente fuori centro per creare un senso di profondità e luce, che sarà completato da un filtro ombra esterna.
Prima di finire con defs sezione, aggiungi un paio di ombre esterne per dare un po 'più di profondità ad alcune forme:
Questo apparirà dietro l'area del record. Il X, y, larghezza e altezza le proprietà si riferiscono alla posizione e alle dimensioni all'interno della forma usando questo filtro. L'offset definisce l'ombra relativa alla forma originale. La sfocatura impedisce che la forma offset sia di colore uniforme, in modo che appaia come un'ombra. In questo caso apparirà solo l'ombra, non la forma stessa - l'ombra verrà definita da una forma dedicata che verrà posizionata dietro la forma del record. Per i controlli utente, che sono circolari e metallici, vogliamo anche un'ombra esterna, ma vogliamo che anche la forma stessa venga visualizzata:
Questa differenza principale qui, a parte la scala dell'ombra, è l'elemento di fusione, che manterrà la forma originale mentre mostra anche l'ombra attorno ad esso.
Questa è una preparazione sufficiente; andiamo avanti con la grafica! Ogni oggetto aggiunto al corpo dell'SVG verrà visualizzato sopra agli elementi precedentemente elencati, quindi lavoreremo dal basso verso l'alto, iniziando dalle forme sul retro e finendo con quelle sul davanti.
Innanzitutto, aggiungi una forma rettangolare per lo sfondo:
Il rect le dimensioni e la posizione dell'elemento sono specificate rispetto all'SGG contenente, che, se si ricorda, è relativo alla dimensione dell'elemento contenitore. Lo imposteremo in seguito in JavaScript. Useremo le dimensioni relative e i valori di posizione, laddove possibile, in modo che l'intera immagine, oltre all'animazione e all'interazione, possa salire o scendere su richiesta. Si noti che il riempimento dell'elemento specifica uno dei gradienti che abbiamo definito, usando il suo attributo ID.
Il prossimo dal basso è l'ombra del record, utilizzando uno dei filtri ombra esterna che abbiamo creato:
L'ombra si troverà dietro il disco, come una forma circolare con un raggio che equivale a circa un terzo dello spazio assegnato all'immagine, posizionato al centro. Poiché il filtro in questo caso non si applica alla fusione con l'immagine, il cerchio stesso non apparirà, solo la sua ombra.
Il prossimo è il record stesso:
Come con l'ombra, il cx e cy gli attributi rappresentano il centro del record, che è centrato nell'immagine orizzontalmente e verticalmente, con un raggio di circa un terzo. Di nuovo, usiamo uno dei gradienti che abbiamo definito, che faremo in ogni forma.
In cima al disco c'è la sua etichetta, quindi aggiungila dopo:
Il cerchio dell'etichetta ha lo stesso punto centrale del disco, attraverso il quale si estende per circa un terzo della strada. Iniziamo con la prima delle opzioni di sfumatura dell'etichetta che abbiamo definito e implementeremo l'utente passando da una di queste all'altra in seguito, includendo qui un attributo ID per fare riferimento a questo elemento in JavaScript.
Ora, mettiamo un po 'di lucentezza sul record:
Quando il disco gira, si muoverà verso destra e verso il basso solo un po ', quindi manteniamo la brillantezza leggermente più piccola della registrazione, in modo che non si diffonda oltre quando si muove. Questo elemento ha anche un attributo ID per rilevare l'interazione dell'utente.
Per completezza, aggiungiamo un piccolo fuso al centro del record:
Questa forma utilizza il gradiente metallico che abbiamo creato. Applichiamo anche il secondo filtro ombra di rilascio, che include la fusione in modo tale che la forma e l'ombra vengano entrambe visualizzate.
Ultimo ma non meno importante, abbiamo bisogno di un piccolo pulsante per consentire agli utenti di controllare la modifica del record, utilizzando lo stesso riempimento e filtro del mandrino:
Questa volta, invece di un elemento di auto-chiusura, separiamo i tag cerchio di apertura e chiusura. Questo perché animiamo il pulsante quando gli utenti lo cliccano e includeremo l'effetto di animazione tra questi tag. Si noti che siamo stati in grado di riutilizzare gli elementi di riempimento e filtro da defs sezione. Ecco l'aspetto iniziale del grafico una volta che le dimensioni della pagina sono state posizionate:
Ogni elemento aggiunto al corpo dell'SVG verrà visualizzato sopra agli elementi elencati in precedenza.
Ora abbiamo i nostri elementi visivi sul posto, aggiungiamo un po 'di animazione. Possiamo fare girare il record usando le trasformazioni di animazione SVG, che sono un'estensione dell'animazione SMIL. Questi effetti animati sono definiti all'interno del markup SVG. Un effetto si applica a qualsiasi elemento SVG in cui appare. È possibile utilizzare le trasformazioni CSS3 sugli elementi SVG, ma le alternative basate su SMIL offrono un maggiore livello di controllo.
Includeremo due semplici animazioni: il disco girerà e il pulsante si sposterà leggermente quando l'utente fa clic. Iniziamo con l'animazione leggermente più diretta per il pulsante.
All'interno dell'elemento forma pulsante, tra i tag cerchio di apertura e chiusura che abbiamo creato, aggiungi la trasformazione animata come segue:
Il animateTransform si applica a un attributo XML all'interno dell'elemento in cui appare. In questo caso, è una trasformazione di traduzione. Il a partire dal e a gli attributi rappresentano le posizioni di inizio e fine per l'elemento, che sono relative alla sua posizione di partenza, quindi il pulsante si sposterà verso destra e verso il basso di un singolo pixel. La trasformazione inizierà quando un utente fa clic, trascorre oltre un decimo di secondo ed esegue una volta. Il pulsante tornerà alla sua posizione originale al termine dell'animazione. Suggerimento: per mantenere un elemento nella posizione finale dopo un'animazione, specificare riempire = "congelare".
Ora per girare il disco. Un animateTransform si applica a un elemento SVG, ma abbiamo bisogno della rotazione per applicare a più di un elemento, in particolare per il record e l'etichetta (non per lo splendore o l'ombra). Piuttosto che creare animazioni separate per ciascuna ed eseguirle contemporaneamente, possiamo usare una singola trasformazione raggruppando questi elementi. Prima dell'elemento cerchio che rappresenta il record (con "recordGrad" come riempimento) aggiungere un tag di gruppo di apertura:
Dopo il cerchio che rappresenta l'etichetta, chiudi il gruppo:
Ora aggiungi la trasformazione prima di questo tag di gruppo di chiusura in modo che si applichi all'intero gruppo:
Questa volta, l'effetto animato è una trasformazione ruotata. L'elemento ruoterà di 360 gradi e, per aggiungere all'effetto, si sposterà verso destra e verso il basso di un singolo pixel per ogni rotazione, per un periodo di un secondo, ripetendo indefinitamente. Questa trasformazione includerà anche a a partire dal attributo, in quanto è necessario specificare la posizione iniziale degli elementi da ruotare. Se non si specifica questa posizione, gli elementi ruotano intorno al 0, 0 punto per impostazione predefinita. Tuttavia, al momento, non puoi fornire valori relativi (cioè percentuali) a questi attributi, ma solo valori fissi. Per questo motivo, abbiamo intenzione di impostare il a partire dal attributo quando specifichiamo le dimensioni SVG in JavaScript.
Ora implementiamo le nostre funzioni interattive: facendo clic sul pulsante per modificare il record e premendo il record per rallentarlo.
Per prima cosa, nella sezione dello script del titolo della pagina, aggiungi queste variabili per contare e tenere traccia dei disegni dell'etichetta:
// tiene traccia dell'etichetta del record corrente var currLabel = 0; // modifica questo per un diverso numero di etichette var numLabels = 3;
Ora, all'interno del tag di apertura per l'elemento circle che rappresenta il pulsante (che ora ha un'animazione tra i suoi tag), aggiungi il seguente listener di eventi click:
onclick = "changeRecord ()"
Torna nella sezione degli script head, aggiungi il contorno della funzione:
function changeRecord ()
Ogni volta che l'utente preme il pulsante, ci sposteremo sull'etichetta successiva, tornando al primo quando raggiungiamo l'ultimo:
Accentsconagua
// passa all'etichetta successiva currLabel ++; // resetta se al numero più alto se (currLabel> numLabels - 1) currLabel = 0; // imposta l'attributo fill sul gradiente successivo document.getElementById ("recordLabel"). setAttribute ("fill", "url (#labelGrad" + currLabel + ")"); L'ultima riga qui mostra come puoi interagire con gli elementi SVG usando le tecniche DOM, come faresti con altri elementi della pagina web. Qui, abbiamo impostato il riempire attributo dell'elemento cerchio etichetta per utilizzare il riempimento sfumato successivo, specificando l'ID riempimento.
Ora aggiungi i seguenti attributi dell'evento all'elemento lustro del record (con "shineGrad" come riempimento), poiché utilizzeremo il mouse su e giù per gli eventi su di esso per innescare il rallentamento della registrazione e accelerarla di nuovo:
onmousedown = "onRecord ()" onmouseup = "offRecord ()"
Torna nella sezione script, aggiungi la funzione per quando un utente sta premendo il record:
// funzione chiamata quando l'utente sta premendo la funzione record onRecord ()
All'interno di questa funzione, possiamo rallentare l'animazione della rotazione del record alterando il animateTransform attributo di durata. Modifichiamo anche l'opacità lucentezza per creare l'impressione di premere verso il basso:
// rallenta la durata dell'animazione document.getElementById ("spinTrans"). setAttribute ("dur", "5s"); // riduci l'opacità lucente document.getElementById ("shine"). style.opacity = "0.7"; Quando l'utente rilascia il record, vogliamo che ritorni alla normale velocità e all'aspetto, quindi aggiungi la funzione "mouse su" dopo:
// funzione chiamata quando l'utente rilascia la funzione di registrazione offRecord () // ripristina la velocità normale document.getElementById ("spinTrans"). setAttribute ("dur", "1s"); // imposta l'opacità su normal document.getElementById ("shine"). style.opacity = "1.0"; Ora possiamo finalmente impostare la dimensione complessiva dell'SVG. Nella parte superiore della sezione dello script, aggiungi una nuova variabile:
// dimensione desiderata di SVG var size = 300;
Inizialmente useremo 300 pixel per la larghezza e l'altezza del grafico, ma sei libero di modificarlo in qualsiasi momento. Definire una funzione nella sezione script per impostare queste dimensioni:
// funzione per impostare la funzione di dimensioni SVG setSize () // set css e transform size var holder = document.getElementById ("picHolder"); holder.style.height = dimensione + "px"; holder.style.width = dimensione + "px"; document.getElementById ("spinTrans"). setAttribute ("from", "0," + size / 2 + "," + size / 2 + ""); Impostiamo la dimensione sul contenitore div elemento. Prenditi un momento per guardare la linea finale in questa funzione. Poiché l'animazione di trasformazione di rotazione non può utilizzare valori percentuali relativi, dobbiamo impostare il parametro a partire dal elemento che utilizza la variabile size (divisa per due per il punto centrale del record). Con 300 come dimensione SVG, questo è il modo in cui la trasformazione appare con valori fissi:
Se vuoi usare valori fissi nel tuo SVG puoi farlo. Stiamo usando questa tecnica solo per dimostrare l'uso di dimensioni relative. Infine, chiama questa funzione alla fine della sezione di script:
window.addEventListener ("DOMContentLoaded", setSize, false); La nostra animazione SVG interattiva è ora completa! Apri la tua pagina in un browser di supporto per visualizzare l'effetto; non dimenticare di provare a interagire con il record e il pulsante. Prova ad alterare la variabile delle dimensioni per vedere come si adattano gli elementi SVG, comprese le animazioni e le interazioni.
Se desideri esplorare ulteriormente SVG, alcuni argomenti da considerare includono percorsi, testo, mascheratura e ritaglio. Ci sono anche una serie di opzioni di animazione aggiuntive da considerare. Naturalmente, questi effetti non funzioneranno per tutti gli utenti in questo momento, ma si spera che un giorno presto ...
