Duke futur svg në css. Shtimi i SVG në një faqe duke përdorur një etiketë

Një artikull i thelluar mbi stilimin e përmbajtjes në një element SVG dhe tejkalimin e problemeve shoqëruese.

Grafikat në formatin SVG përdoren veçanërisht shpesh për krijimin e ikonave dhe një nga teknikat më të zakonshme për këtë janë spritet SVG duke përdorur përdorimin e SVG për të instancuar ikonat në vendin e duhur dokument.

Instantimi i ikonave ose çdo përmbajtje tjetër SVG në një element shkakton vështirësi në hartimin e kopjeve individuale. Qëllimi i këtij artikulli është t'ju japë një përmbledhje të disa mënyrat e mundshme anashkaloni kufizimet e projektimit që lidhen me përdorimin .

Por para se të fillojmë, le të hedhim një vështrim të shpejtë në strukturën bazë dhe grupimin e elementeve në SVG, duke kaluar gradualisht në , DOM, dhe më pas përsëri në CSS. Ne do të analizojmë pse dizajni mund të shkaktojë vështirësi dhe si t'i kapërceni ato.

Një turne i shpejtë i strukturës, grupimit dhe referencës së elementeve SVG në SVG

SVG përfshin 4 elementë bazë për përcaktimin, strukturimin dhe referimin e përmbajtjes SVG në një dokument. Këta elementë lejojnë ripërdorimin e imazheve, duke e mbajtur kodin të lexueshëm dhe të mirëmbajtur. Për shkak të natyrës së SVG, disa nga këta elementë kanë funksionalitet të ngjashëm me komandat përkatëse në redaktuesit e imazhit.

4 elementet kryesore të grupimit dhe lidhjes në SVG janë , , dhe .

Elementi (shkurt për "grup") përdoret për të grupuar logjikisht grupe të lidhura elementet grafike... Për sa i përket redaktorëve grafikë (si p.sh Adobe illustrator) element në funksionalitet është i ngjashëm me funksionin “Group Objects”. Ju gjithashtu mund të mendoni për një grup si një shtresë në redaktues grafik.

Grupimi i elementeve është i dobishëm kur dëshironi të aplikoni një stil për të gjithë elementët në një grup, dhe gjithashtu kur dëshironi të animoni të gjithë elementët në një grup duke ruajtur marrëdhënien midis tyre.

Elementi përdoret për të përcaktuar shumë gjëra, kryesisht duke përcaktuar modele si gradientët që më pas mund të përdoren për të mbushur elementë të tjerë SVG. Mund të përdoret për të përcaktuar çdo element që keni ndërmend të përdorni kudo në kanavacë.

Elementi kombinon mundësitë dhe në atë që përdoret për të grupuar elementë me përkufizimin e një shablloni që mund të referohet diku tjetër në dokument. Ndryshe nga , nuk përdoret për vendosjen e modeleve; në përgjithësi përdoret për të krijuar simbole, të tilla si ikona, të cilat më pas aplikohen në të gjithë dokumentin.

Elementi ka edhe një avantazh i rëndësishëm: merr një atribut viewBox i cili lejon shkallëzimin brenda çdo fushëveprimi.

Elementi ju lejon të përdorni një element të përcaktuar më parë kudo në dokument. Ju lejon të ripërdorni elementë, ofron funksionalitet të ngjashëm me ngjitjen e kopjeve në një redaktues grafik. Me të mund të përdoret si element i veçantë, dhe grupi i dhënë , ose .

Për të përdorur një element, duhet të kaloni një lidhje në atë element, identifikuesi është atributi xlink: href dhe poziciononi atë duke specifikuar atributet x dhe y. Ju mund të aplikoni stile në një element dhe ato do të kalojnë në përmbajtjen e atij elementi.

Por cila është përmbajtja ? Ku është klonuar? Dhe si funksionon kaskada CSS me të?

Përpara se t'u përgjigjemi këtyre pyetjeve, dhe duke pasur parasysh se ne ishim vetëm një paraqitje e shkurtër e strukturës dhe grupimit të SVG-ve, ia vlen të përmendim disa artikuj që do t'ju lejojnë të mësoni më shumë rreth këtyre elementeve, si dhe atributit viewBox në një element. :

• Strukturimi, grupimi dhe referencat në SVG - Elementet g, përdorimi, përkufizimet dhe simbolet
• Kuptimi i sistemit të koordinatave SVG (Pjesa 1): Viewport, viewBox dhe PreserveAspectRatio

SVG dhe hije DOM

Kur referoni një element me , kodi juaj duket diçka si kjo:

Në ekran shfaqet një ikonë, përmbajtja e së cilës përcaktohet brenda , por në fakt kjo është përmbajtja e elementit që është një klon .

Por elementi ky është vetëm një element vetë-mbyllës - nuk ka përmbajtje midis etiketave hapëse dhe mbyllëse, kështu që ku klonohet përmbajtja ?

Përgjigja është në hije DOM(për disa arsye e lidh gjithmonë me Batman, nuk e di pse).

Çfarë është Shadow DOM?

DOM hije është identike me DOM-in e rregullt, përveç se në vend që të jenë pjesë e pemës kryesore të dokumentit, nyjet DOM hije i referohen një pjese të dokumentit që është paralel me dokumentin kryesor, por jo i aksesueshëm për skriptet dhe stilet e tij. Kjo u jep autorëve aftësinë për të krijuar komponentët modularë duke përmbledhur skriptet dhe stilet. Nëse keni përdorur ndonjëherë elementin e videos ose hyrjen e diapazonit në HTML5 dhe nuk e kuptoni se nga vijnë kontrollet ose rrëshqitësi i luajtësit të videos, atëherë përgjigjja është e njëjtë - DOM hije.

Në rastin e elementit SVG , përmbajtja të cilës i referohet klonohet në fragmentin e dokumentit "të pritur". ... V në këtë rast ky është një host në hije.

Pra, përmbajtja është (një klon ose kopje e elementit të cilit i referohet) është i pranishëm brenda pjesës hije të dokumentit.

Me fjalë të tjera, përmbajtja është aty, por është e padukshme. Njësoj si përmbajtja e rregullt DOM, por jo e aksesueshme nga mjetet e nivelit të lartë si përzgjedhësit CSS dhe JavaScript, të kopjuara në një copë dokumenti të lidhur me .

Tani, nëse jeni një projektues, mund të jeni duke menduar, "OK, e kuptoj, por a ka ndonjë mënyrë për të inspektuar këtë nëndokument dhe për të parë përmbajtjen e tij." Përgjigja është po, ju mund të shikoni përmbajtjen e DOM hije duke përdorur mjetet e zhvillimit në Chrome (në Firefox në ky moment ky funksion nuk është i disponueshëm). Por së pari, duhet të aktivizoni inspektorin hije DOM në skedën e Përgjithshme të panelit të cilësimeve. Kjo përshkruhet në detaje.

Pasi të keni aktivizuar inspektimin e DOM-it në hije në veglat e zhvilluesit, mund të shihni elementë të klonuar në kutinë e veglave, ashtu si elementët e rregullt DOM. Imazhi i mëposhtëm tregon një shembull të një elementi duke iu referuar përmbajtjes së elementit ... Vini re se "# shadow-root" dhe përmbajtja e tij janë klone të përmbajtjes .

Duke përdorur mjete Zhvilluesi i Chrome, mund të inspektoni përmbajtjen e elementit të përdorimit brenda DOM-it të hijes (“# shadow-root”, rreshti është gri. Kjo pamje e ekranit inspekton logon e Codrops nga shembulli që do të shikojmë në seksionin tjetër.

Duke parë kodin e inspektuar, mund të shihni se DOM-i i hijes është shumë i ngjashëm me DOM-in e rregullt, me përjashtim të mënyrës se si trajtohet nga CSS dhe JavaScript e dokumentit kryesor. Ka edhe dallime të tjera midis tyre, të cilat nuk do t'i trajtojmë në këtë artikull për shkak të vëllimit të tyre, kështu që nëse doni të dini më shumë, ju rekomandoj artikujt e mëposhtëm:

• Shadow DOM 101 (përkthyer nga Frontender.info)
• Hyrje në Shadow DOM (Video)

Duke pasur parasysh përvojën time të kufizuar me DOM-in hije, unë e shoh atë si një DOM të rregullt që duhet të trajtohet ndryshe për sa i përket aksesit të CSS dhe JavaScript në elementët e tij. Kjo është ajo që ka rëndësi për ne kur punojmë me SVG: Si të ndikojmë në përmbajtje brenda DOM hije, sepse është e rëndësishme për ne që të jemi në gjendje ta stilojmë atë. E gjithë pika e përdorimit është aftësia për të krijuar kopje të ndryshme të një elementi dhe në shumicën e rasteve duhet të jemi në gjendje të stilojmë çdo kopje ndryshe. Për shembull, mund të jetë një logo me tema me dy ngjyra ose ikona me shumë ngjyra për tema me ngjyra të ndryshme. Pra, është e rëndësishme për ne që të jemi në gjendje ta bëjmë këtë me CSS.

Siç u tha, përmbajtja e DOM hije nuk është e disponueshme për CSS, ndryshe nga DOM i rregullt. Pra, si ta stilojmë atë? Ne nuk mund të përdorim një shteg pasardhës si kjo:

Përdorni linjën # e rrugës (goditja: # 009966;)

Sepse ne nuk kemi akses në DOM hije duke përdorur përzgjedhës të rregullt CSS.

Ndoshta, siç bëj unë, ju prisni që atributet e prezantimit të kenë specifikën më të lartë të çdo rregulli stili. Në fund të fundit, zakonisht stilet e jashtme rishkruhen nga deklarata të brendshme, dhe ato, nga ana tjetër, rishkruhen nga stilet e atributeve inline - ato kanë specifikën maksimale, dhe, në përputhje me rrethanat, përparësi ndaj stileve të tjera. Ndërsa kjo pritshmëri ka kuptim, mekanizmi aktual është i ndryshëm.

Në fakt, atributet e prezantimit konsiderohen "fletë stili autorizimi" të nivelit të ulët dhe mbishkruhen nga pjesa tjetër e deklaratave të stilit: stilet e jashtme, të brendshme dhe të brendshme. Forca e tyre e vetme është përparësia e tyre mbi stilet e trashëguara. Dhe kjo eshte e gjitha.

Tani që e kemi kuptuar, le të kthehemi te elementi ynë dhe përmbajtjen e tij.

Ne e dimë se nuk mund të vendosim stile brenda duke përdorur Përzgjedhës CSS.

Por ne gjithashtu e dimë se si me elementin , stilet e aplikuara në do të trashëgohet nga të gjithë pasardhësit e tij (të cilët janë në hije DOM).

Pra, së pari le të përpiqemi të ndryshojmë ngjyrën e mbushjes së elementit brenda duke aplikuar selektorin në vetë elementin me shpresën se kaskada dhe trashëgimia do të bëjnë punën e tyre.

Megjithatë, kjo ngre disa pyetje:

1. Ngjyra e mbushjes do të trashëgohet të gjithë pasardhësit element , edhe ato që nuk dëshironi t'i stiloni (por nëse brenda ju keni vetëm një artikull, atëherë ky problem nuk do të jetë).
2. Nëse keni eksportuar SVG nga një redaktues grafik, ose për ndonjë arsye tjetër nuk mund të modifikoni kodin SVG, atëherë do të përfundoni duke punuar me SVG që tashmë ka atribute të prezantimit të aplikuara (përveç nëse e anashkaloni në mënyrë eksplicite këtë kur eksportoni në formatin SVG) dhe vlerat . nga këto atribute do të kenë përparësi ndaj atyre të trashëguara .

Dhe edhe nëse mund të modifikoni kodin SVG dhe mund t'i heqni qafe ato, ju rekomandoj shumë të mos e bëni këtë duke arsyet e mëposhtme:

1. Heqja e atributeve për hir të vendosjes së veçorive të caktuara më vonë do të rivendosë vlerat e këtyre vetive në vlerat e tyre të paracaktuara, të cilat, si rregull, janë mbushja e zezë dhe goditja (siç zbatohet për ngjyrat).
2. Duke rivendosur vlerat, ju e detyroni veten të stiloni të gjithë grupin e vetive.
3. Atributet e prezantimit që janë vendosur fillimisht janë një kthim i mrekullueshëm në rast se hasni probleme me stilet e jashtme. Nëse CSS nuk ngarkohet, ikonat tuaja do të duken akoma të shkëlqyera.

Pra, ne i kemi këto atribute, por në të njëjtën kohë duam të dizajnojmë shembuj të ndryshëm ikonash në mënyra të ndryshme.

Kjo bëhet duke detyruar atributet e prezantimit të trashëgojnë stilet e specifikuara nga ose gjetja e një mënyre për të punuar rreth tejkalimeve të këtyre vlerave. Për ta bërë këtë, do të duhet të shfrytëzojmë fuqinë e plotë të kaskadimit të CSS.

Le të fillojmë me shembuj të thjeshtë dhe gradualisht kalojmë në ato komplekse.

Rishkrimi i vlerave të atributeve të prezantimit me CSS

Atributet e prezantimit anashkalohen nga çdo deklaratë stili. Ne mund ta përdorim këtë në mënyrë që atributi i prezantimit të marrë vlerën e trashëguar nga stilet. .

Kjo është thjesht për shkak të çelësit Fjala CSS trashëgon. Hidhini një sy shembulli tjetër- një ikonë akulloreje e vizatuar me një skicë, ngjyrën e së cilës duam ta ndryshojmë në raste të ndryshme. Ikona e krijuar nga Erin Agnoli e Projektit Emëror.

Përmbajtja e ikonës (shtegut) tonë të akullores përcaktohet brenda elementit , që do të thotë se nuk do të shfaqet në kanavacë si parazgjedhje.

Ne shfaqim shembuj të shumtë të ikonës duke përdorur .

Ne vendosim gjerësinë dhe lartësinë e ikonave duke përdorur CSS. Unë jam duke përdorur të njëjtat dimensione si viewBox, por ato nuk duhet të jenë identike. Megjithatë, për të shmangur hapësirën e tepërt të bardhë brenda SVG, sigurohuni që të mbani raportin e pamjes.

Ikona (gjerësia: 100 px; lartësia: 125 px;)

Me këtë kod, ne morëm daljen e mëposhtme:

Vini re se falë kufijve të zinj të shtuar rreth SVG-ve tona, ju mund të shihni kufijtë e secilit, duke përfshirë atë të parën, në të cilin përmbajtja nuk jepet. Mbani mend: dokumenti SVG në të cilin keni përcaktuar simbolin do të shfaqet në faqe, por jo përmbajtje... Për ta parandaluar këtë, përdorni veçorinë e ekranit: asnjë në SVG-në e parë. Nëse nuk e fshihni SVG me përkufizimet e ikonave, ai do të shfaqet në ekran edhe nëse nuk i caktoni dimensionet - do të marrë 300 me 150 piksele të paracaktuar (kjo është vlera e paracaktuar për elementët e pazëvendësueshëm në CSS) dhe do të merrni një bllok bosh që nuk ju nevojitet në ekran ...

Tani le të përpiqemi të ndryshojmë ngjyrën e mbushjes për çdo shembull të ikonës:

Use.ic-1 (mbush: skyblu;) use.ic-2 (mbush: # FDC646;)

Ngjyra e mbushjes së ikonave ende nuk ndryshon, pasi ngjyra e trashëguar mbishkruhet me atributin fill = "# 000" në elementin e rrugës. Për të parandaluar që kjo të ndodhë, ne duhet të detyrojmë rrugën për të trashëguar ngjyrën:

Shtegu Svg (mbush: trashëgo;)

Voila! ngjyrat, dhënë elementeve tani janë aplikuar në rrugën e secilit. Shikoni demonstrimin dhe eksperimentoni me vlerat duke i instancuar dhe vendosur ato ngjyra të ndryshme:

Tani kjo teknikë funksionon pasi kemi detyruar përmbajtjen trashëgojnë stilet. Por në shumë raste, kjo nuk është pikërisht ajo që dëshironi. Ka mënyra të tjera të projektimit, tani do t'i drejtohemi disa prej tyre.

Dekorimi i përmbajtjes duke përdorur të gjithë pronën CSS

Disa kohë më parë, kur punoni në një ikonë të aktivizuar me , më duhej një nga elementët brenda tij për të trashëguar të gjitha stilet të tilla si mbushja, goditja, gjerësia e goditjes, tejdukshmëria dhe madje edhe transformimi. Kështu që më duhej të kontrolloja të gjitha këto atribute përmes CSS, duke i mbajtur të gjitha atributet e prezantimit në shënim si një rezervë.

Nëse hasni në një detyrë të ngjashme, ndoshta vendosni se do të marrë shumë kohë nëse bëni gjithçka në CSS:

Shtegu # myPath (mbush: trashëgo; goditje: trashëgo; gjerësia e goditjes: trashëgo; transformimi: trashëgo; / * ... * /)

Pasi të keni ekzaminuar këtë fragment, do të vini re një model, që do të thotë se do të kishte kuptim të kombinoni të gjitha vetitë e specifikuara në një dhe ta vendosni atë trashëgojnë vlerën.

Për fat të mirë, do të na ndihmojë Vetia CSS të gjitha. Referenca ime CSS përmend përdorimin e të gjitha tipareve për stilimin SVG, por ia vlen të studiojmë njohuritë tona.

Duke përdorur të gjitha pronat ne mund ta bëjmë këtë:

Shtegu # MyPath (të gjitha: trashëgojnë;)

Kjo funksionon mirë në të gjithë shfletuesit që mbështesin të gjithë, megjithatë duhet të merren parasysh sa vijon pikë e rëndësishme: Kjo deklaratë i thotë elementit të trashëgojë fjalë për fjalë të gjitha vetitë e prindit të tij, duke përfshirë ato që nuk dëshironi të vendosni në element. Prandaj, nëse nuk dëshironi që të gjitha pronat CSS të stilohen, kjo nuk do të funksionojë për ju - kjo është zgjidhja e fundit dhe është e përshtatshme vetëm pjesërisht kur keni një element të pa stiluar dhe kontroll të plotë mbi vetitë e tij në CSS. Nëse përdorni këtë deklaratë dhe nuk përcaktoni vlera për të gjitha vetitë CSS, ato do të kalojnë derisa të gjejnë një vlerë për të trashëguar, në shumicën e rasteve këto janë stile të paracaktuar të shfletuesit.

Vini re se kjo vlen vetëm për atributet që mund të vendosen duke përdorur CSS, jo atributet që mund të vendosen vetëm në SVG. Nëse atributi mund të vendoset duke përdorur CSS, ai do të trashëgojë stilet, përndryshe jo.

Aftësia për të aktivizuar trashëgiminë e atributeve të prezantimit të të gjitha stileve , por çka nëse keni një ikonë të përbërë nga disa elementë dhe nuk dëshironi që të gjithë të trashëgojnë të njëjtën ngjyrë mbushjeje? Po sikur të dëshironi të aplikoni shumë ngjyra të ndryshme plotësoni për pasardhës të ndryshëm? Vendosja e një stili në nuk përshtatet më. Ne kemi nevojë për diçka të ndryshme për të kaskaduar ngjyrat që dëshironi për të elementet e nevojshme.

Përdorimi i ndryshores CSS CurrentColor për të stiluar përmbajtjen

Përdorimi i variablit CSS aktualColor në lidhje me teknikën e përshkruar më sipër ju lejon të përcaktoni dy ngjyra për një element, në vend të një. Fabrice Weinberg shkroi për këtë një vit më parë.

Ideja është që të aplikoni njëkohësisht në plotësoni dhe ngjyrosni vetitë dhe më pas kaskadoni ato veti në përmbajtje duke përdorur aftësitë e ndryshores aktualeColor. Le të hedhim një vështrim në kodin e mostrës për të parë se si funksionon kjo.

Le të themi se duam ta stilojmë këtë logo minimaliste të Codrops duke përdorur 2 ngjyra - një për pjesën e përparme dhe një për pjesën e pasme.

Së pari, le të fillojmë me kodin për këtë imazh: ne kemi një simbol që përmban një përshkrim të ikonës dhe tre shembuj duke krijuar tre kopje të logos.

Nëse vendosim ngjyrën e mbushjes në element për çdo rast, kjo ngjyrë do të trashëgohet nga të dy blozat, gjë që nuk është qëllimi ynë.

Pra, në vend të përcaktimit të një ngjyre mbushjeje dhe kaskadimit të saj mënyra e zakonshme, do të përdorim variablin aktualColor në mënyrë që njolla më e vogël e planit të parë të ketë një ngjyrë të ndryshme dhe do ta vendosim këtë vlerë me vetitë e ngjyrave.

Së pari, duhet të fusim CurrentColor ku duam të aplikojmë këtë ngjyrë - ky do të jetë vendi në shënimin ku përcaktohet ikona, domethënë brenda ... Tani ky fragment duket si ky:

Pastaj duhet të heqim atributin e mbushjes së prezantimit nga blobi i dytë dhe ta lëmë atë të trashëgojë ngjyrën e mbushjes nga elementi. duke përdorur trashëgiminë.

Nëse do të përdornim fjalën kyçe trashëgim për të detyruar atributet e prezantimit të trashëgojnë vlerat nga , të dyja pjesët do të trashëgojnë të njëjtën vlerë dhe CurrentColor nuk do të kishte asnjë efekt. Prandaj, në këtë teknikë, duhet të heqim atributin që duam të vendosim përmes CSS dhe të lëmë vetëm atë në të cilin do të përdorim aktualColor.

Tani duke përdorur vetitë e mbushjes dhe ngjyrës në ne do të shtojmë stile në blob nga logoja:

Codrops-1 (mbushje: # 4BC0A5; ngjyra: # A4DFD1;). Codrops-2 (mbushje: # 0099CC; ngjyra: # 7FCBE5;). Codrops-3 (mbushje: # 5F5EC0; ngjyra: #AEAFDD;)

Çdo element merr eigenvalue mbushni dhe ngjyrosni. Në secilën prej tyre, ngjyra e mbushjes kaskadon dhe plotëson shtegun e parë që nuk ka një atribut mbushje, dhe ngjyra e vetive të ngjyrës përdoret për të vendosur atributin mbushje në shtegun e dytë.

Pra, ajo që ndodhi është vlera aktuale e ngjyrës e rrjedhur në stilet e përmbajtjes së elementit duke përdorur variablin aktualColor. E këndshme, apo jo?

Këtu është një demonstrim me kodin e përdorur:

Kjo teknikë me dy ngjyra është e shkëlqyeshme për logot me dy ngjyra. Në artikullin e tij, Fabrice krijoi tre versione të ndryshme të logos Sass duke ndryshuar ngjyrën e tekstit në lidhje me sfondin.

Fjala kyçe CurrentColor është e vetmja variabël CSS e disponueshme për momentin. Megjithatë, nëse do të kishim më shumë variabla, mund t'i përdornim për të plotësuar më shumë më shumë vlerat në përmbajtje ? Po, ata mundën. Amelia Bellamy-Royds e prezantoi këtë koncept një vit më parë në blogun e saj në Codepen. Le të shohim se si funksionon.

E ardhmja: stilimi i përmbajtjes duke përdorur variablat CSS

Kodi i robotit përmban të gjitha ngjyrat e tij përbërëse:

Tani, ne nuk do të përdorim variablat CSS si vlera të atributeve plotësuese për secilën skicë. Në vend të kësaj, ne do t'i përdorim ato si ngjyra mbushjeje duke përdorur veçorinë mbushëse CSS, duke i mbajtur të gjitha atributet e mbushjes në vend. Këto atribute do të përdoren si rezervë për shfletuesit që nuk mbështesin variablat CSS - imazhi do të duket si ishte nëse variablat CSS nuk funksionojnë.

Me shtuar kodi i variablave do të jetë si më poshtë:

Meqenëse etiketat e stilit inline mbishkruajnë atributet e prezantimit, shfletuesit që mbështesin variablat CSS do t'i përdorin ato variabla për të vendosur ngjyrën e mbushjes. Dhe shfletuesit që nuk i mbështesin do të përdorin atributin mbushje.

Pastaj duhet të vendosim vlera për variablat në CSS. Por së pari, instantoni imazhin me :

Pas kësaj, ne do të vendosim vlerat e variablave për përdorim në mënyrë që ato të mund të kalojnë në përmbajtjen e tij. Ngjyrat që zgjidhni do të krijojnë skema e ngjyrave Foto. Meqenëse roboti ynë përdor tre ngjyra kryesore, ne do t'i emërtojmë ato primare, dytësore dhe terciare.

# robot-1 (--ngjyra-primare: # 0099CC; --ngjyra-sekondare: # FFDF34; ---ngjyra-terciare: # 333;)

Ju ende mund të përdorni vetitë e mbushjes dhe ngjyrës me këto variabla, por mund të bëni pa to fare. Pra, me ngjyrat e vendosura në variablat tona, roboti duket kështu:

Mund të përdorni sa më shumë kopje të imazhit që dëshironi dhe për secilën prej tyre të specifikoni një grup ngjyrash të ndryshme duke krijuar tema të ndryshme... Kjo është pjesërisht e dobishme kur dëshironi të stiloni logon tuaj. menyra te ndryshme në varësi të kontekstit dhe në raste të tjera të ngjashme.

Siç u përmend, shfletuesit që nuk mbështesin variablat CSS përdorin atributet e dhëna të prezantimit si kthim, ndërsa shfletuesit që nuk mbështesin Variablat CSS përdorni ato për të plotësuar veçorinë fill dhe për të rishkruar atributet. Por çfarë ndodh nëse shfletuesi mbështet variablat CSS, por keni harruar t'i vendosni këto variabla në stilet tuaja, ose keni vendosur një vlerë të gabuar?

Për robotin tonë hipster, ne vendosëm tre variabla dhe vetëm disa nga fragmentet e tij nuk varen prej tyre - në fund të fundit, ai u zhvillua fillimisht për temat e mundshme. Prandaj, nëse e ekzekutoni këtë kod në një shfletues me mbështetje për variablat CSS dhe hiqni të gjitha deklaratat me këto variabla, do të merrni rezultatin e mëposhtëm:

Nëse vlerat e variablave nuk janë vendosur ose nuk janë të sakta, shfletuesi do të përdorë ngjyrën e tij të paracaktuar, e cila zakonisht është e zezë për mbushje dhe goditje në SVG.

Ju mund të punoni rreth kësaj duke vendosur një ngjyrë të ndryshme si një alternativë për shfletuesit mbështetës. Sintaksa për variablat CSS ju lejon ta bëni këtë: në vend që të kaloni funksionin var () emrin e ndryshores si argument, ju kaloni dy argumente të ndara me presje - emrin e ndryshores dhe kthimin, në këtë rast do të jetë vlera për atributin e prezantimit.

Pra, tani kodi i robotit tonë duket si ky:

Dhe është e gjitha. Nëse një variabël nuk është vendosur në një vlerë, shfletuesi do të ketë gjithmonë një ngjyrë kthimi në magazinë. E mrekullueshme.

Duke përdorur këtë teknikë, ju mund ta shfaqni këtë robot kudo në faqe me vendosja e ngjyrave të ndryshme për çdo rast dhe marrja e ndryshme tema me ngjyra përfundimisht.

Mund të eksperimentoni me demonstrimin, të krijoni sa më shumë kopje të robotit që dëshironi dhe ta ngjyrosni atë në çdo ngjyrë - thjesht mos harroni të përdorni një shfletues me mbështetje për variablat CSS:

Nëse e shikoni këtë demonstrim në një shfletues me mbështetje për variablat CSS, atëherë, ndër të tjera, do të shihni një version blu dhe të verdhë të robotit, siç specifikuam në variablat CSS. Përndryshe, do të shihni tre robotë identikë me një ngjyrë kthimi.

Duke përmbledhur

Ishte një artikull i madh.

Përdorimi i fuqisë së kaskadës CSS për të stiluar përmbajtjen i ruajtur në hije DOM bëhet më pak kompleks. Dhe me variablat CSS (currentColor ose vetitë e personalizuara) ne mund të futemi fshehurazi në DOM hije dhe të personalizojmë grafikat tona si të duam, ndërsa krijojmë një kthim prapa në rast problemesh.

Personalisht, më pëlqen shumë kombinimi i variablave CSS dhe SVG. Më pëlqen funksionaliteti i tyre i përbashkët, veçanërisht në drejtim të krijimit të një mekanizmi kthimi.

Mund të gjejmë gjithashtu mënyra të tjera për të stiluar përmbajtjen. në të ardhmen, ndërsa diskutimet vazhdojnë rreth përdorimit të variablave CSS si parametra SVG - kështu që ky artikull nuk mbulon gjithçka që duhet të dini rreth kësaj teme.

Puna me përmbajtje SVG të ripërdorshme është një nga temat e ndërlikuara të SVG, ka të bëjë me sjelljen dhe vendndodhjen e kodit të klonuar. Kjo ngre shumë pyetje të lidhura që mund të bëhen temë e artikujve të veçantë.

Mbështetja e Grafikës Vektoriale të shkallëzuar (SVG) është e shkëlqyer në të gjitha shfletues modern Formati i imazhit shfaqet në kontekste të mahnitshme në shumë faqe të ndryshme të internetit. Por pavarësisht se është standardi për gati dy dekada, SVG mbetet një format disi i ri për disa stilistë dhe zhvillues, duke i lënë ata të hutuar se si duhet të përdoret në një faqe. Këtu janë disa arsye pse duhet të përdorni SVG:

Madhësia e vogël e skedarit

SVG-të tipike të dizajnuara mirë janë shumë më të vogla se PNG-të ekuivalente, që do të thotë se faqet që i përdorin ato ngarkohen më shpejt për përdoruesit.

Shkallëzueshmëria

Meqenëse SVG është ndërtuar nga formula matematikore, jo nga piksele fikse grafika bitmap Imazhet SVG mund të përshkallëzohen lart e poshtë pa humbje të cilësisë, duke i bërë ato ideale për faqet moderne të përgjegjshme.

Ndërvepron me DOM

SVG nganjëherë referohet si "vizatim me shënim": çdo element në imazhin SVG ndërvepron me DOM, që do të thotë se CSS dhe JavaScript mund të manipulojnë pjesë të dokumentit SVG. Ndryshe nga grafika bitmap, çdo formë individuale në SVG mund të ketë identifikuesin ose klasën e vet.

Lehtë për tu modifikuar dhe përshtatur

Cilësia e komponentëve SVG do të thotë që dokumentet SVG të formuara mirë mund të modifikohen lehtësisht në çdo redaktues teksti pa pasur nevojë për programe të specializuara kërkohet për bitmaps. Dhe meqenëse SVG ndërvepron me DOM-in, elementët e tij mund të modifikohen duke përdorur CSS. Formati SVG është i shkëlqyeshëm për të shfaqur:

logot

• ilustrime dhe vizatime

Mjetet SVG

Ndërsa mund të krijoni një dokument SVG duke përdorur ndonjë redaktori i tekstit, programet e ilustrimit të vektorit si Adobe Illustrator ose Inkscape janë zakonisht zgjedhja më e mirë(megjithëse duhet theksuar se aplikacione të tjera duke përfshirë programet 3D si Blender dhe aplikacionet e serverit, mund të eksportojë SVG).

Çfarëdo që përdorni, duhet të jeni të vetëdijshëm se krijimi i SVG-ve nga aplikacionet lë ende shumë për të dëshiruar ndonjëherë: dokumenti që rezulton shpesh rikodohet dhe ndonjëherë formatohet dobët. Skedari svg mund të bëhet më i vogël, më kompakt duke e përpunuar me një optimizues si SVGOMG. Ndonjëherë kalimi i dokumentit të gabuar svg përmes validatorit W3C mund t'ju ndihmojë të identifikoni problemet.

Integrimi SVG

Ekzistojnë tre mënyra kryesore që SVG mund të përdoret drejtpërdrejt në një faqe interneti:

Meqenëse SVG bazohet në XML, ai mund të integrohet drejtpërdrejt në kodin në faqen tuaj. Kodi SVG redukton vonesën dhe kohën e përgjithshme të ngarkimit për faqen tuaj.


si bitmap, skedari SVG mund të referohet me etiketë ose nëpërmjet CSS si imazh sfondi. Kjo është shpesh Menyra me e mire përveç nëse SVG-të kanë nevojë për vëmendjen individuale të CSS dhe JavaScript.


Futet si