SVG Viewport și ViewBox (pentru începători compleți)

În acest sfat rapid, vom distruge exact ce fereastră și viewBox sunt în SVG. Veți învăța:

• Diferența dintre fereastra de vizualizare și viewBox
• Aspectele SVG-urilor pe care le puteți controla cu fiecare
• Cum sunt aplicate fiecare

Sa incepem!

SVG Viewport 

Dacă literalmente rupeți cuvântul "fereastră de vizualizare", veți obține un indiciu cu privire la rolul său în SVG; creează un "port" prin care puteți "vizualiza" o secțiune a unui SVG. Vă puteți imagina acest lucru ca fiind ceva asemănător cu o fereastră de ferestre prin care puteți vedea lumea dincolo.

Examinarea SVG este ca o fereastră cu fereastră a cărei mărime determină ceea ce puteți vedea prin ea

Ca și în cazul unei ferestre, dimensiunea ferestrei de vizualizare determină cât de mult puteți vedea, dar nu definește dimensiunea oricărui lucru care ar putea fi vizibil prin acel port de vizualizare. Ceea ce este de cealaltă parte ar putea fi teoretic orice dimensiune.

De exemplu, este posibil să aveți o formă în grafică 100px de 100px, dar dacă setați portul de vizualizare la 50px de 50px veți vedea numai o porțiune din acea formă. Dimensiunea ferestrei de vedere este stabilită prin adăugare lăţime și înălţime atributele svg element, după cum urmează:

În primul SVG vedem întregul 100px de 100px cerc, dar în cea de-a doua SVG atunci când ne-am stabilit dimensiunea noastră de vizualizare la 50px de 50px vedem doar un sfert din cerc.

SVG viewBox

viewBox poate fi gandit la fel de mult ca portul de vizualizare, dar cu doua caracteristici suplimentare: poate "pan" si poate "zoom". Bazându-se pe analogia "privirea prin geam", dacă fereastra de vizualizare este ca o fereastră, viewBox este ca un telescop.

Poziția de vizualizare SVG este foarte asemănătoare cu fereastra de vizualizare, dar se poate panorama și zoom-ul ca un telescop

ViewBox Parameters

Controlăm viewBox adăugând-o ca un atribut la svg element, cu o valoare care cuprinde patru numere separate:

viewBox =    

Primele două numere definesc poziția viewBox, pe care o vom considera drept "panning". Ultimele două numere definesc dimensiunile viewBox, pe care o vom considera drept "mărire".

Notă: la fel de bine ca svg element, viewBox atributul poate fi, de asemenea, utilizat pe elemente simbol, marcator, model și vedere.

Zooming

Vom începe prin a privi la "zooming", pe care o putem face cu ultimele două viewBox parametri: lăţime și înălţime respectiv. Vom lăsa primii doi parametri la 0 0 deocamdata.

Dacă acești ultimii doi parametri au aceleași dimensiuni ca și portul de vizualizare, nu există nici o zoomare sau ieșire, astfel încât nimic să nu se modifice. Aruncați o privire SVG 3, de exemplu:

Dar dacă facem aceste două numere mai mari decât dimensiunile din fereastra de vizualizare, vom micșora efectiv și, dacă le vom face mai mici, vom mări.

În SVG numărul 4 din exemplul de mai sus am setat viewBox lăţime și înălţime la 100, care este dublul dimensiunii portului nostru de vizualizare. Această opțiune se "micșorează" și arată dublul conținutului, dezvăluind din nou întregul cerc.

În cel de-al cincilea SVG viewBox este setat la a lăţime și înălţime de 25, care este jumătate din dimensiunea ferestrei noastre de vizualizare. Această opțiune se "mări", indicând jumătate din conținutul conținutului.

panning

Primii doi viewBox parametrii vă permit să "panoramați" prin setarea colțului din stânga sus al paginii viewBox ar trebui să fie. Primul număr controlează poziția orizontală, iar cel de-al doilea controlează poziția verticală.

• Pentru a derula corect, măriți primul număr. 
• Pentru a derula la stânga, micșorați primul număr.
• Pentru a derula în jos, creșteți al doilea număr. 
• Pentru a panorama, micșorați al doilea număr.

Uitați-vă la modul în care funcționează această panoramare în acest exemplu. Pentru a vă reaminti, numărul SVG 3 are a 50 de 50 vizualizare, viewBox este adăugată dar fără pantare sau zoom. Numărul 6 este același, dar este păstrat în dreapta și în jos:

Panning și Zooming Împreună

Puteți, desigur, atât să panoramați cât și să măriți simultan, utilizând toți cei patru parametri simultan, de exemplu:

Când utilizați ViewBox, setați vizualizarea

Ori de câte ori utilizați viewBox atribut, nu uitați să setați și dimensiunile ferestrei de vizualizare. Dacă nu, acestea vor fi implicite la 100% și probabil veți avea o grafică supradimensionată:

Pe scurt

Să ardem totul în câteva puncte:

• Portalul de vizualizare este ca o fereastră pe care o privești pentru a vedea conținutul unui SVG.
• viewBox este similar cu portul de vizualizare, dar îl puteți utiliza și pentru a "panorama" și a "mări" ca un telescop.
• Controlați fereastra de vizualizare prin lăţime și înălţime parametrii pe svg element.
• Controlați vizualizarea prin adăugarea atributului viewBox la svg element. Poate fi folosit și pe elemente simbol, marcator, model și vedere.
• viewBox Valoarea atributului este formată din patru parametri separați de spațiu.
• Primii doi viewBox parametrii de control "panning", iar ultimele două de control "zoom".
• Măriți primul parametru la "pan" dreapta, micșorați-l la "pan" la stânga.
• Măriți al doilea parametru în "pan" în jos, micșorați-l în "pan" până sus.
• Fă viewBox , adică ultimii doi parametri, mai mari decât cei din portul de vizualizare pentru a "micșora" și mai mici pentru a "mări".

Sper că acest lucru ajută la clarificarea apei uneori tulbure din SVG viewport și viewBox. Creați SVG fericit!

Mai multe detalii despre SVG