Një Udhëzues i Web Design për Përdorimin e 'SVG' Viewbox (HTML)
Viewbox është një atribut që zakonisht përdoret kur krijohen forma SVG . Nëse mendoni për dokumentin si një kanavacë, kutia e pamjes është pjesë e kanavacës që dëshironi të shikoni shikuesit. Megjithëse faqja mund të mbulojë tërë ekranin e kompjuterit, shifra mund të ekzistojë vetëm në një të tretën e tërë.
Viewbox ju lejon të tregoni parser për të zmadhuar në atë të tretë. Eliminon hapësirën shtesë të bardhë. Mendoni për kutinë e pamjes si një qasje virtuale për të prerë një imazh.
Pa të, grafiku juaj do të shfaqet një e treta e madhësisë së tij aktuale.
Vlerat Viewbox
Për të prerë një imazh, duhet të krijoni pikë në foto për të bërë shkurtime. E njëjta gjë vlen edhe kur përdoret atributi i kutisë së pamjes. Cilësimet e vlerës për kutinë e shikimit përfshijnë:
- minx-koordinata fillestare x
- miny - koordinata fillestare y
- gjerësi - gjerësia e kutisë së shikimit
- height-height i kutisë së shikimit
Sintaksa për vlerat e kutisë së pamjes është:
viewBox = "0 0 200 150"
Mos e ngatërroni gjerësinë dhe lartësinë e kutisë së shikimit me gjerësinë dhe lartësinë që keni vendosur për dokumentin SVG . Kur krijoni një skedar SVG, një nga vlerat e para që vendosni është gjerësia dhe lartësia e dokumentit. Dokumenti është një kanavacë. Kutia e pamjes mund të mbulojë tërë kanavacën ose vetëm një pjesë të saj.
Kjo kuti e pamjes mbulon tërë faqen.
Kjo kutinë e pamjes mbulon gjysmën e faqes duke filluar në këndin e sipërm të djathtë.
Forma juaj gjithashtu ka lartësi dhe gjerësi detyra.
Është një dokument që mbulon 800 x 400 px me një kuti që fillon në këndin e sipërm të djathtë dhe zgjeron gjysmën e faqes. Forma është një drejtkëndësh që fillon në cepin e sipërm djathtas të kutisë së pamjes dhe lëviz 100 px në të majtë dhe 50 px poshtë.
Pse vendosni një Shiko?
SVG bën shumë më tepër sesa thjesht të nxjerrë një formë. Mund të krijojë një figurë në krye të një tjetri për një efekt hije. Ajo mund të transformojë një formë në mënyrë që të përkulet në një drejtim. Për filtrat e përparuar, do të duhet të kuptosh dhe të përdorësh atributin e kutisë së pamjes.