Share
Este de la sine înțeles că SVG nu este la fel de utilizat ca mulți oameni din comunitatea de dezvoltare web ar putea crede că ar trebui să fie. Dacă dezbatem dezbaterea, în acest tutorial, voi demonstra cum să folosiți SVG inline, acoperind o serie de tehnici și explorând interacțiunea dintre pagina web și grafică. Atunci când este utilizat împreună cu alte standarde emergente în HTML5, JavaScript și CSS3, SVG-urile inline pot contribui semnificativ la experiența utilizatorului.
Puteți interacționa cu elementele SVG folosind tehnici DOM, așa cum ați proceda și cu alte elemente de pagină web.
În acest tutorial, vom lucra printr-un exemplu practic de SVG inline creând o componentă simplă reprezentând o punte record. Înregistrările se vor roti, iar utilizatorul va putea să interacționeze cu acesta - apăsând pentru a le încetini și eliberând-o pentru a-l accelera din nou. SVG va conține, de asemenea, un buton pe care utilizatorii pot face clic pentru a schimba înregistrarea, făcând ca aspectul său să se modifice ușor. Elementele SVG vizibile vor fi îmbunătățite cu gradienți și filtre de umbră.
Verificați demo-ul acum pentru a avea o idee clară despre ceea ce construim.
După cum probabil veți ști, SVG-urile inline se încadrează în standardele HTML5, astfel încât codul pe care îl folosim în acest tutorial nu va fi pe deplin acceptat în toate browserele. Deși SVG-urile inline sunt suportate teoretic în toate versiunile curente ale browserelor majore, animațiile interne și efectele interactive pe care le vom folosi nu sunt atât de bine susținute încă. Rezultatul final ar trebui să funcționeze corect în versiunile curente ale Firefox, Chrome și Opera. Ca întotdeauna cu tehnicile HTML5, asigurați-vă că nu vă bazați pe aceste efecte în niciun site live pe care lucrați și că includeți alternative acolo unde este posibil.
Să intrăm și să începem prin crearea unei conturări a paginii HTML5, după cum urmează:
Unul dintre avantajele principale pentru utilizarea SVG este cât de scalabil este. Pentru a exploata acest lucru, vom folosi în primul rând valori relative pentru a defini conținutul SVG. Adăugați un element container pentru SVG în corpul paginii:
Pentru a vedea cum se află SVG-ul în elementul care conține, adăugați următoarele în secțiunea de stil din capul paginii:
#picHolder background: #dedeff; frontieră: 1px solid # 666666;
În elementul container din corpul paginii dvs., adăugați schița elementului SVG, după cum urmează:
Am stabilit lățimea și înălțimea la 100%, deoarece vom specifica lățimea elementului care conține. Cu toate acestea, în loc să specificăm în mod explicit dimensiunile, vom folosi o funcție JavaScript pentru a vă arăta cât de ușor puteți scala SVG în sus și în jos. Puteți include o lățime și o înălțime fixă în eticheta SVG de deschidere sau în secțiunea de stil.
Formele vizibile din grafic vor fi definite în interiorul elementului SVG. Înainte de aceasta, vom lucra la defs secțiune. defs secțiunea este locul unde definiți definițiile la care vă puteți referi mai târziu când creați formele. Pentru acest tutorial, defs secțiunea va conține definiții pentru câteva umpleri cu gradient și câteva zgomote de picătură. Adăugați această secțiune nouă în elementul SVG:
Elementele pe care le plasăm în această secțiune nu vor apărea de fapt în imagine, ci vor fi folosite ca umpluturi și filtre pentru formele care o fac. Vom include mai multe umpluturi de gradient; așa că hai să lucrăm prin fiecare la rândul său.
Primul este un gradient liniar:
Acest gradient va fi specificat ca umplutură pentru zona dreptunghiului de fond. x1 și y1 atributele reprezintă punctele de pornire ale gradientului în forma plină, cu un gradient care se desfășoară de acolo până la punctul reprezentat de x2 și y2. În acest caz, gradientul va rula de sus în jos. Elementele de stop reprezintă puncte de culoare în gradient. Prima dintre ele afirmă că 10% de la începutul gradientului va fi o culoare roșie închisă solidă, iar cea de-a doua oprește că 90% de la sfârșitul gradientului va avea o culoare galbenă. Între aceste două puncte, gradientul va amesteca culorile unul în altul. Ambele culori au opacitate totală.
Înainte să adăugăm un gradient pentru înregistrarea însăși. Acesta este un pic mai complex - este un gradient radial cu mai multe opriri de culoare:
Un gradient radial începe din interiorul cercului, cu cele mai interioare și cele mai exterioare părți ale cercului definite de cx, cy, fx și fy, enumerate alături de rază. În acest caz, gradientul radial va ocupa întreaga formă de înregistrare circulară. Cea mai mare parte a înregistrării va fi negru, cu două inele de culoare ușor mai deschise, reprezentând secțiunile mai netede din centrul înregistrării și ale marginilor sale. Vom plasa o etichetă pe disc și în centrul său, astfel încât primul plasture de culoare mai deschisă pe înregistrare va apărea chiar în afara acestuia. Adăugați următoarea etichetă pentru gradientul etichetei:
Acesta este un gradient liniar simplu care va fi folosit ca umplere pentru eticheta de înregistrare circulară. Cu toate acestea, observați că ID-ul gradientului are un zero la sfârșitul acestuia. Acest lucru se datorează faptului că vom adăuga o funcție interactivă, permițând utilizatorului să "schimbe înregistrarea". O funcție JavaScript va comuta între o gamă de umpluturi de gradient pentru elementul de etichetă. În acest scop, adăugați un alt cuplu de gradienți:
Gradienții au fiecare un ID care se termină cu un număr întreg, astfel încât să putem itera prin intermediul acestora în JavaScript. Acum, definiți un alt gradient pentru a crea un efect de strălucire pe partea de sus a înregistrării:
De data aceasta, gradientul folosește stopuri opace și alfa transparente; efectul va fi o strălucire subtilă peste înregistrare. În cele din urmă, avem nevoie de o umplere metalică pentru buton și ax:
De data aceasta, gradientul radial este ușor în afara centrului pentru a crea un sentiment de adâncime și lumină, care va fi completat de un filtru de umbră.
Înainte de a termina cu defs secțiune, adăugați câteva zgomote pentru a da unele dintre forme mai adâncime:
Acesta va apărea în spatele zonei de înregistrare. X, y, lăţime și înălţime proprietățile se referă la poziția și dimensiunile din formă utilizând acest filtru. Deplasarea definește umbra relativă la forma originală. Blurul împiedică formarea decalajului să fie o culoare solidă, astfel încât să apară ca o umbră. În acest caz va apărea doar umbra, nu forma în sine - umbra va fi definită printr-o formă dedicată care va fi plasată în spatele formei record. Pentru comenzile utilizatorului, care sunt circulare și metalice, dorim și o umbră de picătură, dar dorim ca și forma să se afișeze:
Această diferență principală aici, în afară de scara umbrei, este elementul de amestec, care va păstra forma originală, arătând, de asemenea, umbra din jurul acesteia.
E suficient pregătirea; hai să mergem mai departe cu grafica! Fiecare element pe care îl adăugați la corpul SVG va fi afișat pe lângă elementele listate anterior, așa că vom lucra de jos în sus, începând cu formele din spate și terminând cu cele din față.
Mai întâi, adăugați o formă dreptunghiulară pentru fundal:
RECT dimensiunile și poziția elementului sunt specificate în raport cu SVG care conține, care, dacă vă amintiți, este relativ la dimensiunea elementului care conține. Vom stabili acest lucru mai târziu în JavaScript. Vom folosi valorile relative și valorile poziției ori de câte ori este posibil, astfel încât întreaga imagine, plus animația și interacțiunea să poată crește sau să scadă la cerere. Observați că elementul de umplere specifică unul dintre gradientele pe care le-am definit, utilizând atributul său ID.
Următoarea din partea de jos este umbra înregistrării, folosind unul dintre filtrele umbrelor pe care le-am creat:
Umbra va sta în spatele înregistrării, ca o formă circulară, cu o rază de aproximativ o treime din spațiul alocat imaginii, plasată în centru. Deoarece filtrul în acest caz nu se aplică amestecului cu imaginea, cercul în sine nu va apărea, ci doar umbra acestuia.
Următorul este înregistrarea în sine:
Ca și umbra, cx și cy atributele reprezintă centrul înregistrării, care este centrat în imagine orizontal și vertical, cu o rază de aproximativ o treime. Din nou, folosim unul dintre gradientele pe care le-am definit, pe care le vom face în fiecare formă.
În partea superioară a înregistrării este eticheta, deci adăugați-o în continuare:
Cercul de etichetare are același punct central cu înregistrarea, de-a lungul căruia se întinde aproximativ o treime din drum. Începem cu prima opțiune pentru gradientul de etichete pe care am definit-o și vom implementa schimbarea utilizatorului între acestea mai târziu - vom include un atribut ID aici pentru a se referi la acest element în JavaScript.
Acum, haideți să strălucească pe record:
Când înregistrarea se va învârti, se va mișca în dreapta și în jos doar puțin, așa că păstrăm strălucirea puțin mai mică decât înregistrarea, astfel încât nu pare să se răspândească dincolo de ea când se mișcă. Acest element are, de asemenea, un atribut ID pentru a detecta interacțiunea cu utilizatorul.
Pentru completare, să adăugăm un mic ax în centrul înregistrării:
Această formă utilizează gradientul metalic pe care l-am creat. De asemenea, aplicăm cel de-al doilea filtru de umbră, care include amestecarea, astfel încât să apară ambele forme și umbre.
Nu în ultimul rând, avem nevoie de un mic buton pentru ca utilizatorii să poată controla modificarea înregistrării, utilizând aceeași umplere și filtru ca și axul:
De data aceasta, în loc de un element cu auto-închidere, separăm etichetele din cercul de deschidere și închidere. Acest lucru se datorează faptului că vom anima butonul când utilizatorii îl fac clic și vor include efectul de animație între aceste etichete. Observați că am reușit să reutilizăm elemente de umplere și filtrare din defs secțiune. Iată aspectul inițial al graficului odată ce dimensiunile paginii sunt în vigoare:
Fiecare element adăugat în corpul SVG va fi afișat pe lângă elementele listate anterior.
Acum avem elementele noastre vizuale, să adăugăm niște animații. Putem face rotirea înregistrării folosind transformări de animație SVG, care reprezintă o extensie a animației SMIL. Aceste efecte animate sunt definite în marcajul SVG. Un efect se aplică oricăror elemente SVG care apar în interiorul acestuia. Puteți utiliza transformările CSS3 pe elementele SVG, dar alternativele bazate pe SMIL vă oferă un nivel mai ridicat de control.
Vom include două animații simple: înregistrarea va fi rotită și butonul se va mișca puțin atunci când utilizatorul o dă clic pe el. Să începem cu animația puțin mai dreaptă pentru buton.
În interiorul elementului de formă a butonului, între etichetele de deschidere și de închidere create, adăugați transformarea animată după cum urmează:
animateTransform se aplică unui atribut XML în elementul în care apare. În acest caz, este o transformare a traducerii. din și la atributele reprezintă pozițiile de început și de sfârșit ale elementului - acestea sunt relative la poziția inițială, astfel încât butonul se va deplasa spre dreapta și în jos cu un singur pixel. Transformarea va începe când un utilizator dă clic, trece peste o zecime de secundă și execută o singură dată. Butonul va reveni la poziția inițială atunci când animația se termină. Sfat: pentru a păstra un element în poziția finală după o animație, specificați umple = „îngheța“.
Acum, pentru a roti recordul. Un animateTransform se aplică unui element SVG, dar avem nevoie de rotație pentru a se aplica mai multor elemente - în special înregistrării și etichetei (nu strălucirii sau umbrei). Mai degrabă decât crearea de animații separate pentru fiecare și executarea lor simultan, putem folosi o singură transformare prin gruparea acestor elemente împreună. Înainte de elementul cerc reprezentând înregistrarea (cu "recordGrad" ca umplutură) adăugați o etichetă de grup de deschidere:
După cercul reprezentând eticheta, închideți grupul:
Acum adăugați transformarea înainte de această etichetă a grupului de închidere, astfel încât să se aplice întregului grup:
De data aceasta, efectul animat este o transformare de rotire. Elementul se va roti cu 360 de grade și, pentru a adăuga efectul, se va muta în dreapta și în jos cu un singur pixel pe fiecare rotire, pe o perioadă de o secundă, repetând pe termen nelimitat. Această transformare va include și o din , deoarece este necesar să specificăm poziția inițială a elementelor care se rotesc. Dacă nu specificați această poziție, elementele se rotesc în jurul valorii de 0, 0 punct implicit. Cu toate acestea, în prezent, nu puteți furniza valori relative (adică procentuale) acestor atribute, numai valori fixe. Din acest motiv, vom seta din atunci când specificăm dimensiunile SVG în JavaScript.
Acum, să implementăm funcțiile noastre interactive: dând clic pe butonul pentru a schimba înregistrarea și apăsând înregistrarea pentru ao încetini.
Mai întâi, în secțiunea de script a capului paginii, adăugați aceste variabile pentru a număra și urmări etichetele:
// ține evidența etichetei actuale de înregistrare var currLabel = 0; // modificați acest lucru pentru un număr diferit de etichete var numLabels = 3;
Acum, în interiorul etichetei de deschidere pentru elementul cerc reprezentând butonul (care are acum o animație între etichetele sale), adăugați următorul ascultător pentru evenimentul de clic:
onclick = "changeRecord ()"
Înapoi în secțiunea cap script, adăugați schița funcției:
function changeRecord ()
De fiecare dată când utilizatorul apasă butonul, vom trece la următoarea etichetă, mutându-ne înapoi la prima când ajungem la ultima:
Accentsconagua
// trece la următoarea etichetă currLabel ++; // resetare la cel mai mare număr dacă (currLabel> numLabels - 1) currLabel = 0; // setați atributul de umplere la documentul gradient următor.getElementById ("recordLabel"). setAttribute ("umple", "url (#labelGrad" + currLabel + ")); Ultima linie de aici demonstrează modul în care puteți interacționa cu elementele SVG utilizând tehnicile DOM, așa cum ați proceda și cu alte elemente ale paginii web. Aici, am setat completati atributul elementului cercului de etichetă pentru a utiliza următoarea umplutură de gradient, specificând ID-ul umplerii.
Acum adăugați următoarele atribute ale evenimentului la elementul de strălucire a înregistrării (cu "shineGrad" ca umplutură), deoarece vom folosi mouse-ul în jos și sus evenimentele de pe el pentru a declanșa încetinirea înregistrării în jos și accelerarea din nou:
onmousedown = "onRecord ()" onmouseup = "offRecord ()"
Înapoi în secțiunea de script, adăugați funcția atunci când un utilizator apasă înregistrarea:
// funcția apelată atunci când utilizatorul apasă pe funcția de înregistrare onRecord ()
În interiorul acestei funcții, putem încetini animația de învârtire a înregistrărilor modificând animateTransform atributul de durată. De asemenea, modificăm opacitatea stralucirii pentru a crea impresia de a apăsa:
// încetinește documentul de durată a animației.getElementById ("spinTrans"). setAttribute ("dur", "5s"); // scade documentul de opacitate a strălucirii.getElementById ("shine") style.opacity = "0.7"; Când utilizatorul eliberează înregistrarea, vrem să revină la viteza și aspectul normal, deci adăugăm funcția "mouse up"
// funcția apelată atunci când utilizatorul eliberează funcția de înregistrare offRecord () // resetare la viteza normală document.getElementById ("spinTrans") setAttribute ("dur", "1s"); // setați opacitatea înapoi la documentul normal.getElementById ("shine"). style.opacity = "1.0"; Putem seta în final mărimea generală a SVG acum. În partea de sus a secțiunii script, adăugați o nouă variabilă:
// dimensiunea dorită a SVG var size = 300;
Vom folosi inițial 300 pixeli pentru lățimea și înălțimea graficului, însă sunteți liberi să modificați acest lucru în orice moment. Definiți o funcție în secțiunea script pentru a seta aceste dimensiuni:
// funcția de a seta funcția de dimensiuni SVG setSize () // set css și transformă dimensiunea var holder = document.getElementById ("picHolder"); holder.style.height = size + "px"; holder.style.width = size + "px"; document.getElementById ("spinTrans"). setAttribute ("de la", "0," + dimensiune / 2 + "," + dimensiune / 2 + "); Am stabilit mărimea conținutului div element. Ia-ți un moment să te uiți la linia finală a acestei funcții. Deoarece animația de transformare de rotație nu poate utiliza valori procentuale relative, trebuie să setăm din element folosind variabila de mărime (împărțită la două pentru punctul central al înregistrării). Cu 300 ca dimensiune SVG, acesta este modul în care transformarea ar apărea cu valori fixe:
Dacă doriți să utilizați valori fixe în SVG, puteți face acest lucru. Folosim această tehnică doar pentru a demonstra că folosim dimensiuni relative. În final, apelați această funcție la sfârșitul secțiunii script:
window.addEventListener ("DOMContentLoaded", setSize, false); Animația noastră SVG interactivă este acum completă! Deschideți pagina într-un browser de asistență pentru a vedea efectul; nu uitați să încercați să interacționați cu înregistrarea și butonul. Încercați să modificați variabila de mărime pentru a vedea cum se adaptează toate elementele SVG, inclusiv animațiile și interacțiunile.
Dacă doriți să explorați în continuare SVG, unele subiecte care trebuie luate în considerare includ căi, text, mascare și tăiere. Există, de asemenea, o serie de opțiuni suplimentare de animație care trebuie luate în considerare. Desigur, aceste efecte nu vor funcționa pentru toți utilizatorii chiar acum, dar sperăm că într-o zi în curând ...
