D3 este cel mai util atunci când este folosit pentru a crea și manipula imagini vizuale bazate pe SVG. Desenul folosind div și alte elemente HTML este posibil, dar un pic ciudat și, de obicei, există inconsecvențe în afișare în diferite browsere. Utilizarea SVG este mai fiabilă, mai consistentă și mai rapidă.
Elementul SVG
Scalable Vector Graphics (grafice vectoriale scalabile) - un format de imagini bazat pe text. Fiecare imagine SVG este definită folosind un markup de cod similar HTML. Codul SVG poate fi inclus direct în documentul HTML. Fiecare browser web acceptă SVG, cu excepția versiunii Internet Explorer 8 și a celor mai în vârstă. SVG se bazează pe XML, deci este posibil să observați că elementele care nu au o etichetă de închidere trebuie să se închidă automat. De exemplu:
Aici este elementul SVG creat folosind codul de mai sus:
Observați că există un element SVG care necesită 500 pixeli pe orizontală și 50 de pixeli pe verticală.
De asemenea, rețineți că browserele consideră că pixelii reprezintă unitatea de măsură implicită. Am specificat dimensiunile ca 500 și 50, nu 500px și 50px. Putem specifica în mod explicit px sau orice altă unitate de măsură, de exemplu: em. pt. în. cm. și mm.
Forme simple
Există câteva seturi de forme pe care le puteți pune în elementul SVG. Acest set include: rect. cerc. elipsă. line. text și cale.
Dacă sunteți familiarizați cu programarea grafică a computerului, veți reține că, de obicei, un sistem de coordonate pe bază de pixeli pornește din colțul din stânga sus și are coordonatele punctului (0,0). O creștere în x are loc de la stânga la dreapta, o creștere a y de sus în jos.
rect atrage un pătrat. Pătratul este dat de patru valori: x. y - indica punctul din coltul din stanga sus; lățime. înălțime - indicați lățimea și înălțimea pătratului. Acest pătrat ocupă întregul spațiu al SVG-ului nostru:
cercul atrage un cerc. Cercul este dat de trei valori: cx. cy indică punctul situat în centrul cercului circumscris, r specifică raza cercului. Acest cerc este situat în centrul SVG-ului nostru, deoarece atributul cx ("center-x") este 250. Exemplu:
elipsa este setată similar cercului. dar se presupune că raza este dată de două axe: x și y. Utilizați x în loc de x. în loc de y - ry.
linia atrage o linie. Utilizați x1 și y1 pentru a specifica originea liniei și x2 și y2 pentru a specifica coordonatele sfârșitului. Atributul de cursa trebuie să specifice culoarea liniei, altfel va fi invizibilă.
textul desenează textul. Utilizați x. pentru a indica marginea din stânga și y. Pentru a indica poziția verticală a așa numitei linii de bază.
textul va moșteni stilurile CSS ale fontului elementului părinte, cu excepția cazului în care specificați stilurile pentru text. Rețineți modul în care formatul textului de mai sus este același cu textul descris în acest paragraf. Putem suprascrie aceste stiluri de formatare:
De asemenea, rețineți că atunci când orice element vizual se sprijină pe limita elementului SVG, acesta va fi circumcis. Aveți grijă când utilizați textul. astfel încât textul tău să nu fie circumcis. Puteți vedea ce se întâmplă cu textul dacă setați linia de bază (adică y) la 50, la fel ca înălțimea SVG:
calea atrage ceva mai complex decât formele descrise mai sus (de exemplu, silueta țărilor pe geocarde) și va fi descrisă separat. Și acum vom lucra cu cifre simple.
Elemente SVG de styling
În mod implicit, orice element SVG are o umplutură neagră și nu are un cadru. Dacă doriți ceva dincolo de aceasta, va trebui să aplicați stiluri elementului dvs. Proprietățile SVG comune sunt enumerate mai jos:
- umple - umple. Valoarea culorii. La fel ca în CSS, culoarea poate fi specificată în mai multe moduri:
- nume: portocaliu;
- valoare în notație hexazecimală: # 3388aa. # 38a;
- valoare în format RGB: rgb (10, 150, 20);
- valoare în formatul RGBA: rgba (10, 150, 20, 0,5).
- accident vascular cerebral - cadru. Valoarea culorii.
- latimea cursei - lățimea marginii (de obicei în pixeli).
- opacitate - transparență. O valoare numerică între 0,0 (complet transparent) și 1,0 (pe deplin vizibile).
Cu text, puteți utiliza și următoarele proprietăți:
Există două moduri de a aplica stiluri elementelor SVG: fie să atribuiți direct stilurile într-un element ca atribute, fie prin reguli CSS.
Mai jos, unele proprietăți CSS sunt definite direct în elementul cerc:
În alt mod, am putea face acest lucru: nu atribuiți atribute de stil, ci specificați o clasă de stil (precum și elementul HTML obișnuit):
și apoi adăugați umplerea. curse și parametrii de lățime a cursei în stilurile CSS ale clasei cerute:
A doua abordare are mai multe avantaje evidente:
- Puteți descrie o dată clasa și aplica-o la multe elemente.
- Codul CSS este mai ușor de perceput decât atributele din interiorul elementelor.
- Din aceste motive, a doua abordare este mai ușor de întreținut și, de asemenea, mai rapidă.
Utilizarea CSS pentru a aplica stiluri în SVG poate totuși să confunde pe cineva. umple. accident vascular cerebral. lățimea cursei nu este proprietățile CSS (cele mai apropiate CSS-echivalente sunt culoarea de fundal și frontiera). Pentru a vă ajuta să vă amintiți ce reguli din foaia de stil sunt specificate pentru elementele SVG, este de dorit să includeți svg într-un selector CSS:
Suprapunerea și ordinea desenului
În SVG nu există straturi ca atare și niciun concept de adâncime. SVG nu acceptă proprietatea CSS index z-index. Astfel, cifrele pot fi comandate în cadrul unui spațiu bidimensional.
Și, dacă desenați câteva cifre, ele se suprapun:
Ordinea în care elementele sunt specificate în cod determină adâncimea lor. Pătratul purpuriu este afișat mai întâi în cod, astfel încât primul este desenat. Apoi, un pătrat albastru este desenat deasupra violetei, apoi verde deasupra albastru și violet și așa mai departe.
Acest aspect al ordinii de desen devine important atunci când aveți mai multe elemente vizuale care nu ar trebui să fie suprasolicitate de nimic. De exemplu, puteți avea axe sau etichete de valori pe axele care apar pe diagrama scatter. Axele și etichetele trebuie adăugate la SVG la sfârșit, astfel încât să apară înaintea celorlalte elemente și să fie vizibile.
transparență
Transparența poate fi utilă atunci când elementele vizualizării se intersectează, dar totul trebuie să fie vizibil sau atunci când doriți să selectați anumite elemente, dar în același timp să faceți alții invizibili.
Există două moduri de a aplica transparența: utilizați culoarea RGB cu un canal alfa sau setați proprietatea opacitate la o valoare numerică.
Puteți folosi rgba () ori de câte ori aveți nevoie pentru a specifica o culoare, de exemplu, în atributele umplerii și cursei. RGBA () se așteaptă să-i dea cele 3 valori în intervalul de la 0 la 255 pentru roșu, verde și albastru, plus un alfa canal (transparență) în intervalul de la 0.0 la 1.0.
Observați că prin metoda rgba (). Transparența se aplică atributelor umplerii și cursei în mod independent. Umplerea următoarelor cercuri este de 75% transparentă, iar cadrul lor este de 25%:
Pentru a aplica transparența întregului element, trebuie să setați atributul opacity. Mai jos sunt cercuri complet vizibile:
și acestea sunt aceleași cercuri cu transparență diferită:
De asemenea, puteți utiliza atributul de opacitate al unui element ale cărui culori sunt specificate în formatul rgba (). Când faceți acest lucru, transparența se înmulțește. Sub cercurile se utilizează aceleași valori ale culorii RGBA pentru umplere și curse. Primul element nu are atributul de opacitate. în timp ce celelalte două au:
Rețineți că cel de-al treilea cerc are o opacitate de 0,2 sau 20%. Cu toate acestea, partea ei purpurie are o transparență de 75%. Astfel, partea violet este în cele din urmă transparentă cu 0,2 * 0,75 = 0,15 sau 15%.