Zmeňte farbu svg pri umiestnení kurzora myši. Externé súbory štýlu pre SVG vložené s. Pridanie SVG na stránku pomocou značky

SVG je nový štandard pre vektorové obrázky v prehliadači. Vektorové editory ako Adobe Illustrator umožňujú priamo ukladať grafiku v tomto formáte a moderné prehliadače bez problémov zobrazujú SVG.

Keďže obrázky SVG sa skladajú zo značiek, možno ich vytvárať a udržiavať pomocou vašich obľúbených textový editor, rovnako ako to robíte s HTML. A čo viac, je dokonca možné upraviť SVG pomocou CSS, aj keď budete musieť poznať rozdiely medzi štýlmi SVG a HTML.

Atribúty SVG a vlastnosti CSS

Hranica medzi HTML a CSS je jasná. HTML je zodpovedné za obsah a štruktúru, CSS za zobrazenie. V SVG je táto čiara prinajmenšom rozmazaná. Toto je hlavný dôvod textové polia a tvary sa zvyčajne ovládajú pomocou atribútov prvkov, nie pomocou CSS:

V tomto príklade kreslíme obdĺžnik, ktorý je vyplnený atribútom fill. Farba a šírka vonkajšieho okraja obdĺžnika je nastavená atribútmi ťah a šírka ťahu. Obdĺžnik si však môžete aj upraviť nasledujúcim spôsobom pomocou CSS:

Použili sme iba atribúty, ako sú vlastnosti CSS. Aj keď to nefunguje pre všetky atribúty. Týmto spôsobom nebudete môcť nastaviť hodnoty polohy a šírky a výšky. Použijeme iba atribút y, ako aj šírku a výšku .

Rovnako ako v HTML môžeme pracovať s triedami alebo ID ľubovoľného prvku. Preto by sme definovali reprezentáciu mnohých prvkov SVG prostredníctvom štýlovej triedy.

Keďže SVG nerozlišuje medzi oblasťami hlavy a tela, štýly a samotný obsah zdieľajú prvok SVG, ktorý je porovnateľný s prvkom HTML.

Používanie Pseudotried

V SVG je možné použiť pseudotriedy ako :hover , dokonca aj v spojení s vlastnosťou prechodu CSS3.

Implementáciou tohto príkladu uvidíme, že keď umiestnime kurzor myši na prvok s pridelenou triedou príkladu, farba výplne sa zmení z červenej na modrú. Aby to fungovalo správne, nevkladajte SVG s img tag. Lepšie použitie vloženia alebo prvku iframe:

Pri použití značky img sa správne zobrazí samotný SVG. ale efekt vznášania a prechody budú ignorované. Okrem vlastnosti prechodu môžeme použiť aj transform . V tomto prípade budú prvky zmenšené alebo otočené.

Pri používaní CSS3 nezabudnite pridať predpony dodávateľa, aby ste zabezpečili podporu pre čo najviac moderných prehliadačov. Zatiaľ čo Chrome a Firefox zvládajú vykresľovanie bezchybne, Internet Explorer odmieta zobraziť váš výtvor, aj keď je dokonale schopný zobraziť tieto vlastnosti CSS3, keď sa použije na HTML.

Mediálne dotazy a SVG

Ak chcete, aby sa váš SVG prispôsobil konkrétnym rozlíšeniam, stačí použiť mediálne dopyty priamo v ňom:

V tomto príklade sa prvky, ktoré majú triedu príkladu, nezobrazia, akonáhle je viditeľná šírka obrazovky menšia ako 800 pixelov. Pozor, nejde o šírku dokumentu, ale o šírku prvku nosiča SVG.

Podrobný článok o úprave obsahu v prvku SVG a prekonávanie súvisiacich problémov.

Grafika vo formáte SVG sa obzvlášť často používa na vytváranie ikon a jednou z najbežnejších techník na to sú SVG sprites, ktoré používajú SVG na vytváranie inštancií ikon v správne miesto dokument.

Vytváranie inštancií ikon alebo akéhokoľvek iného obsahu SVG v prvku spôsobuje ťažkosti pri navrhovaní jednotlivých kópií. Účelom tohto článku je poskytnúť vám prehľad niektorých možné spôsoby obmedzenia návrhu obchvatu spojené s používaním .

Ale skôr ako začneme, pozrime sa v krátkosti na základnú štruktúru a zoskupenie prvkov v SVG, postupne prejdeme na , DOM a potom späť do CSS. Budeme analyzovať, prečo dizajn môže spôsobiť ťažkosti a ako ich prekonať.

Rýchly pohľad na štruktúru SVG, zoskupenie a referencie prvkov v SVG

SVG obsahuje 4 hlavné prvky na definovanie, štruktúrovanie a prepojenie obsahu SVG v dokumente. Tieto prvky umožňujú opätovné použitie obrázkov, pričom kód zostáva čitateľný a udržiavateľný. Vzhľadom na povahu SVG majú niektoré z týchto prvkov funkčnosť podobnú zodpovedajúcim príkazom v grafických editoroch.

4 základné prvky zoskupenia a prepojenia SVG sú , , a .

Prvok (skratka pre “skupina”) sa používa na logické zoskupenie množín súvisiacej grafiky. Z hľadiska grafických editorov (napríklad Adobe Illustrator) je prvok funkciami podobná funkcii „Skupinové objekty“. Skupinu si môžete predstaviť aj ako vrstvu v editore obrázkov.

Zoskupovanie prvkov je užitočné, keď chcete použiť štýl na všetky prvky v skupine a tiež vtedy, keď chcete animovať všetky prvky v skupine pri zachovaní ich vzťahu.

Prvok sa používa na definovanie mnohých vecí, najmä na definovanie vzorov, ako sú prechody, ktoré sa potom môžu použiť na vyplnenie iných prvkov SVG. Môže sa použiť na definovanie akýchkoľvek prvkov, ktoré sa chystáte použiť kdekoľvek na plátne.

Prvok kombinuje možnosti a v takom, ktorý sa používa na zoskupenie prvkov so šablónou, na ktorú možno odkazovať inde v dokumente. Na rozdiel od , nepoužíva sa na nastavenie vzorov; zvyčajne sa používa na vytváranie symbolov, ako sú ikony, ktoré sa potom aplikujú v celom dokumente.

Pri živle je tu ešte jeden dôležitá výhoda: akceptuje atribút viewBox, ktorý umožňuje priblíženie v ľubovoľnom výreze.

Prvok umožňuje použiť predtým definovaný prvok kdekoľvek v dokumente. Umožňuje opätovné použitie prvkov, poskytuje funkcie podobné kopírovaniu a prilepeniu v grafickom editore. Dá sa použiť ako samostatný prvok a skupina uvedená v , alebo .

Ak chcete použiť prvok, musíte naň odovzdať odkaz, id je atribút xlink:href a umiestniť ho nastavením atribútov x a y. Na prvok môžete použiť štýly a budú kaskádovo prechádzať do obsahu tohto prvku.

Ale aký je obsah ? Kde sa klonuje? A ako s tým kaskáda CSS pracuje?

Pred zodpovedaním týchto otázok a vzhľadom na to, že sme len načrtli povrch štruktúry a zoskupenia SVG, stojí za zmienku niekoľko článkov, ktoré vám umožnia dozvedieť sa viac o týchto prvkoch, ako aj o atribúte viewBox na prvku. :

• Štruktúrovanie, zoskupovanie a prepojenie v SVG – prvky g, use, defs a symbol
• Pochopenie súradnicového systému SVG (časť 1): Viewport, viewBox a PreserveAspectRatio

SVG a tieňový DOM

Keď odkazujete na prvok s , váš kód vyzerá asi takto:

Na obrazovke sa zobrazí ikona, ktorej obsah je definovaný vo vnútri , ale je to vlastne obsah prvku , čo je klon .

Ale prvok je to len jeden samozatvárací prvok – nemá žiadny obsah medzi otváracou a zatváracou značkou, takže kam je obsah naklonovaný ?

Odpoveď je v tieňový DOM (z nejakého dôvodu ho vždy spájam s Batmanom, neviem prečo).

Čo je tieňový DOM?

Tieňový DOM je identický s normálnym DOM s tým rozdielom, že namiesto toho, aby boli súčasťou stromu hlavného dokumentu, tieňové uzly DOM odkazujú na fragment dokumentu, ktorý je paralelný s hlavným dokumentom, ale nie je prístupný pre jeho skripty a štýly. To dáva autorom možnosť vytvárať modulárne komponenty zapuzdrením skriptov a štýlov. Ak ste niekedy použili prvok videa alebo vstup rozsahu v HTML5 a nepochopili ste, odkiaľ sa vzali ovládacie prvky prehrávača videa alebo posuvník, potom je odpoveď rovnaká – tieňový DOM.

V prípade prvku SVG , obsah, na ktorý odkazuje, je naklonovaný do fragmentu dokumentu, ktorý je „hostený“. . AT tento prípad toto je tieňový hostiteľ.

Takže obsah (klon alebo kópia prvku, na ktorý odkazuje) sa nachádza vo vnútri tieňového fragmentu dokumentu.

Inými slovami, obsah tam je, ale je neviditeľný. Rovnaký ako bežný obsah DOM, ale nie je prístupný nástrojmi na vysokej úrovni, ako sú selektory CSS a JavaScript, skopírovaný do fragmentu dokumentu prepojeného s .

Ak ste dizajnér, možno si pomyslíte: "OK, chápem, ale existuje spôsob, ako skontrolovať tento vedľajší dokument a vidieť jeho obsah." Odpoveď je áno, obsah tieňového DOM si môžete zobraziť pomocou nástrojov na tvorbu v prehliadači Chrome (vo Firefoxe zapnuté tento moment táto funkcia nie je dostupná). Najprv však musíte aktivovať tieňového inšpektora DOM na karte Všeobecné na paneli nastavení. Toto je podrobne popísané.

Po povolení Shadow DOM Inspection v nástrojoch pre vývojárov môžete vidieť klonované prvky na paneli Elements rovnako ako bežné prvky DOM. Nasledujúci obrázok zobrazuje príklad prvku A, ktoré odkazuje na obsah prvku . Všimnite si, že „#shadow-root“ a jeho obsah sú klony obsahu .

Používanie nástrojov chrome developer, môžete si prezrieť obsah prvku use vnútri tieňového DOM („#shadow-root“, zvýraznený riadok v šedej farbe). Táto snímka obrazovky kontroluje logo Codrops z príkladu, na ktorý sa pozrieme v ďalšej časti.

Pri pohľade na kontrolovaný kód môžete vidieť, že tieňový DOM je veľmi podobný normálnemu DOM, až na to, ako ho spracovávajú CSS a JavaScript hlavného dokumentu. Sú medzi nimi aj ďalšie rozdiely, ktorým sa pre ich dĺžku v tomto článku nebudeme venovať, takže ak sa chcete dozvedieť viac, odporúčam vám nasledujúce články:

• Shadow DOM 101 (preklad na Frontender.info)
• Úvod do Shadow DOM (video)

Vzhľadom na moje obmedzené skúsenosti s tieňovým DOM ho vnímam ako normálny DOM, s ktorým je potrebné zaobchádzať inak, pokiaľ ide o prístup k jeho prvkom pomocou CSS a JavaScriptu. To je pre nás dôležité pri práci s SVG: ako ovplyvniť obsah vnútri tieňového DOM, pretože je pre nás dôležité, aby sme ho mohli naštylizovať. Celý zmysel používania je to príležitosť tvoriť rôzne kópie a vo väčšine prípadov chceme mať možnosť naštylizovať každú kópiu inak. Môže to byť napríklad logo v dvoch farebných témach alebo viacfarebné ikony pre rôzne farebné témy. Preto je dôležité, aby sme to dokázali pomocou CSS.

Ako bolo uvedené, obsah tieňového DOM nie je prístupný pre CSS, na rozdiel od bežného DOM. Ako to teda naštylizujeme? Nemôžeme použiť detskú cestu, ako je táto:

Použiť cestu#line ( zdvih: #009966; )

Pretože nemáme prístup k tieňovému DOM s bežnými selektormi CSS.

Môžete, rovnako ako ja, očakávať, že prezentačné atribúty budú mať najvyššiu špecifickosť zo všetkých pravidiel štýlu. Koniec koncov, externé štýly sú zvyčajne prepísané internými deklaráciami a tie sú zase prepísané inline štýlmi atribútov - majú maximálnu špecifickosť, a teda prioritu pred ostatnými štýlmi. Aj keď toto očakávanie dáva zmysel, skutočný mechanizmus je iný.

V skutočnosti sa s prezentačnými atribútmi zaobchádza ako s „štýlmi autora“ nízkej úrovne a sú prepísané zvyškom deklarácií štýlu: externým, interným a vloženým štýlom. Ich jedinou silou je, že majú prednosť pred zdedenými štýlmi. A to je všetko.

Teraz, keď sme na to prišli, vráťme sa k nášmu elementu. a jeho obsahu.

Vieme, že vnútri sa nemôžeme štylizovať použitím Selektor CSS.

Ale vieme aj to, ako pri živle , použité štýly zdedia všetky jeho deti (ktoré sú v tieni DOM).

Najprv sa teda pokúsime zmeniť farbu výplne prvku vo vnútri aplikovaním selektora na samotný prvok s očakávaním, že kaskáda a dedičstvo urobia svoju prácu.

To však vyvoláva niekoľko otázok:

1. Farba výplne sa zdedí všetci potomkovia prvok , dokonca aj tie, na ktoré nechcete použiť štýly (ale ak sú vo vnútri máte len jeden prvok, potom tento problém nebude).
2. Ak ste exportovali SVG z grafický editor alebo z nejakého iného dôvodu nemôžete upraviť kód SVG, skončíte s prácou s SVG, ktoré už má aplikované prezentačné atribúty (pokiaľ to pri exporte do formát SVG) a hodnoty týchto atribútov budú mať prednosť pred hodnotami prevzatými z .

A aj keď môžete upraviť kód SVG a zbaviť sa ich, dôrazne vám odporúčam, aby ste to neurobili. z nasledujúcich dôvodov:

1. Odstránenie atribútov z dôvodu neskoršieho nastavenia určitých vlastností obnoví hodnoty týchto vlastností na predvolené hodnoty, a to je spravidla čierna výplň a ťah (vo vzťahu k farbám).
2. Resetovaním hodnôt si vynútite štýl celej sady vlastností.
3. Pôvodne nastavené atribúty prezentácie sú skvelou rezervou v prípade problémov s externými štýlmi. Ak sa CSS nenačíta, vaše ikony budú stále vyzerať pekne.

Takže máme tieto atribúty, ale chceme tiež rôzne štýly ikon.

Robí sa to tak, že prezentačné atribúty budú dediť štýly dané v alebo nájsť spôsob, ako obísť prepisy týchto hodnôt. Aby sme to dosiahli, budeme musieť využiť plný výkon kaskádovania CSS.

Začnime s jednoduché príklady a postupne prejsť na zložité.

Prepisovanie hodnôt atribútov prezentácie pomocou CSS

Atribúty prezentácie sú prepísané akoukoľvek deklaráciou štýlu. Môžeme to použiť na to, aby atribút prezentácie získal hodnotu zdedenú zo štýlov. .

Je to jednoducho vďaka kľúču css slovo dedí. Pozrite sa na nasledujúci príklad – ikonu zmrzliny nakreslenú jediným obrysom, ktorej farbu chceme v rôznych prípadoch zmeniť. Ikona vytvorená Erin Agnoli z projektu Noun Project.

Obsah našej ikony zmrzliny (cesta) je definovaný vo vnútri prvku , čo znamená, že sa nebude štandardne zobrazovať na plátne.

Výstupom je viacero inštancií ikony s .

Šírku a výšku ikon nastavujeme pomocou CSS. Používam rovnaké rozmery ako viewBox , ale nemusia byť identické. Aby sa však predišlo prebytku prázdne miesto vnútri SVG, uistite sa, že zachovávate pomer strán.

Ikona ( šírka: 100px; výška: 125px; )

S týmto kódom sme dostali nasledujúci výsledok:

Všimnite si, že vďaka pridaným čiernym okrajom okolo našich SVG môžete vidieť okraje každého z nich, vrátane prvého, v ktorom nie je vykreslený obsah. Pamätajte: dokument SVG, v ktorom ste definovali symbol, sa zobrazí na stránke, ale bez obsahu. Aby ste tomu zabránili, použite vlastnosť display: none na prvom SVG. Ak neskryjete SVG s definíciami ikon, bude sa stále zobrazovať, aj keď preň nenastavíte rozmery – predvolene bude mať veľkosť 300 x 150 pixelov (čo je predvolená hodnota pre nenahradené prvky v CSS) a skončíte s prázdnym rámčekom na obrazovke, ktorý nepotrebujete.

Teraz sa pokúsme zmeniť farbu výplne pre každú inštanciu ikony:

use.ic-1 ( fill: skyblue; ) use.ic-2 ( fill: #FDC646; )

Farba výplne ikon sa stále nemení, pretože zdedená farba je prepísaná atribútom fill="#000" v elemente cesty. Aby sme tomu zabránili, musíme prinútiť cestu, aby zdedila farbu:

Cesta Svg (fill: zdediť; )

Voila! farby, daný prvkom sa teraz aplikujú na cestu každého z nich. Pozrite si ukážku a pohrajte sa s hodnotami tým, že ich vytvoríte a dáte im rôzne farby:

Teraz táto technika funguje po tom, čo sme vynútili obsah zdediť štýly. Ale v mnohých prípadoch to nie je presne to, čo potrebujete. Existujú aj iné spôsoby navrhovania, teraz prejdeme k niektorým z nich.

Štýl obsahu pomocou vlastnosti all CSS

Pred nejakým časom, pri práci na ikone aktivovanej s Potreboval som, aby jeden z prvkov v ňom zdedil všetky štýly , ako napríklad výplň , ťah , šírka ťahu , nepriehľadnosť a dokonca aj transformácia . Potreboval som teda ovládať všetky tieto atribúty prostredníctvom CSS a zároveň ponechať všetky prezentačné atribúty v značke ako rezervu.

Ak narazíte na podobnú úlohu, pravdepodobne zistíte, že to trvá príliš dlho, ak sa vykoná v CSS:

Cesta#myPath ( vyplniť: zdediť; ťah: zdediť; šírka ťahu: zdediť; transformovať: zdediť; /* ... */ )

Pri pohľade na tento úryvok si všimnete vzor, ​​čo znamená, že by dávalo zmysel skombinovať všetky špecifikované vlastnosti do jednej a nastaviť ju na dedičstvo .

Našťastie nám pomôže vlastnosť all CSS. Moja referencia CSS spomína použitie vlastnosti all na úpravu SVG, ale stojí za to oprášiť naše znalosti.

Pomocou vlastnosti all môžeme urobiť toto:

Cesta#mojaCesta ( všetky: zdediť; )

Funguje to dobre vo všetkých prehliadačoch, ktoré podporujú všetky , ale uvedomte si nasledujúce dôležitý bod: Táto deklarácia hovorí prvku, aby zdedil doslova všetky vlastnosti svojho rodiča, vrátane tých, ktoré nechcete, aby prvok zdedil. Ak teda nechcete, aby boli všetky vlastnosti CSS štylizované, nebude to pre vás fungovať – toto je posledná možnosť a len čiastočne vhodná, keď máte neštylizovaný prvok a plnú kontrolu nad jeho vlastnosťami v CSS. Ak použijete túto deklaráciu a nedefinujete hodnoty pre všetky vlastnosti CSS, budú sa kaskádovať, kým nenájdu hodnotu, z ktorej budú dediť, vo väčšine prípadov predvolené štýly prehliadača.

Všimnite si, že to platí len pre atribúty, ktoré možno nastaviť pomocou CSS, nie pre atribúty, ktoré sú nastavené iba v SVG. Ak je možné atribút nastaviť pomocou CSS, zdedí štýly, inak nie.

Možnosť aktivácie dedenia prezentačnými atribútmi všetkých štýlov , ale čo ak máte ikonu, ktorá pozostáva z niekoľkých prvkov a nechcete, aby všetky zdedili rovnakú farbu výplne? Čo ak chcete použiť veľa rôznych farieb výplne na rôzne deti? Zadanie jedného štýlu v už nesedí. Potrebujeme niečo iné na kaskádu požadované farby do správne prvky.

Použitie premennej CSS currentColor na úpravu obsahu

Použitie premennej CSS currentColor v kombinácii s technikou opísanou vyššie vám umožňuje definovať dve farby pre prvok namiesto jednej. Pred rokom o tom písal Fabrice Weinberg.

Cieľom je súčasne aplikovať na vlastnosti výplne a farby a potom tieto vlastnosti kaskádujte s obsahom pomocou možností premennej currentColor. Pozrime sa na príklad kódu, aby sme pochopili, ako to funguje.

Povedzme, že chceme upraviť toto minimalistické logo Codrops pomocou 2 farieb – jednej pre prednú časť a druhej pre zadnú časť.

Najprv začnime s kódom pre tento obrázok: máme symbol obsahujúci popis ikony a tri inštancie , čím sa vytvoria tri inštancie loga.

Ak na elemente nastavíme farbu výplne v každom prípade túto farbu zdedia obe kvapky, čo nie je naším cieľom.

Takže namiesto definovania farby výplne a jej kaskádovania obvyklým spôsobom, použijeme premennú currentColor na zmenu farby menšej kvapky v popredí a túto hodnotu nastavíme pomocou farebné vlastnosti.

Najprv musíme vložiť aktuálnu farbu tam, kde chceme použiť túto farbu - toto bude miesto v značke, kde je ikona definovaná, to znamená vnútri . Teraz tento úryvok vyzerá takto:

Potom musíme odstrániť prezentačný atribút výplne z druhej kvapky a nechať ho zdediť farbu výplne z prvku pomocou dediť .

Ak by sme použili kľúčové slovo zdediť, aby sme prinútili prezentačné atribúty dediť hodnoty , dedili by obe časti rovnakú hodnotu a currentColor nebude mať žiadny vplyv. Preto pri tejto technike musíme odstrániť atribút, ktorý chceme nastaviť cez CSS, a nechať len ten, v ktorom budeme používať currentColor .

Teraz pomocou vlastností výplne a farby v k poklesu z loga pridáme štýly:

Codrops-1 ( výplň: #4BC0A5; farba: #A4DFD1; ) .codrops-2 (výplň: #0099CC; farba: #7FCBE5; ) .codrops-3 (výplň: #5F5EC0; farba: #AEAFDD; )

Každý prvok prijíma vlastná hodnota vyplniť a vyfarbiť. V každom z nich je farba výplne kaskádovito vyplnená tak, aby vyplnila prvú cestu, ktorá nemá atribút výplne, a farba vlastnosti color sa používa na nastavenie atribútu výplne v druhej ceste.

Čo sa teda stalo je: aktuálna farba unikli do štýlov obsahu prvkov pomocou premennej currentColor. Elegantné, však?

Tu je ukážka s použitým kódom:

Táto dvojfarebná technika je skvelá pre dvojfarebné logá. Fabrice vo svojom článku vytvoril tri rôzne verzie Logo Sass zmenou farby textu vzhľadom na pozadie.

Kľúčové slovo currentColor je jediná v súčasnosti dostupná premenná CSS. Ak by sme však mali viac premenných, mohli by sme ich použiť na vyplnenie ďalších viac hodnoty v obsahu ? Áno, mohli by sme. Amelia Bellamy-Royds predstavila tento koncept na svojom blogu Codepen pred rokom. Pozrime sa, ako to funguje.

Budúcnosť: dizajn obsahu pomocou CSS premenných

Kód robota obsahuje všetky farby, ktoré ho tvoria:

Teraz nebudeme používať premenné CSS ako hodnoty atribútu výplne pre každú cestu. Namiesto toho ich použijeme ako farby výplne pomocou vlastnosti výplne CSS, pričom všetky atribúty výplne zachováme na mieste. Tieto atribúty sa použijú ako náhrada pre prehliadače, ktoré nepodporujú premenné CSS – obrázok sa zobrazí tak, ako keď premenné CSS nefungujú.

Po pridaní premenných bude kód vyzerať takto:

Od inline štýlové značky prepísať prezentačné atribúty, prehliadače, ktoré podporujú premenné CSS, použijú tieto premenné na nastavenie farby výplne. A prehliadače, ktoré ich nepodporujú, použijú atribút fill.

Ďalej musíme nastaviť hodnoty premenných v CSS. Najprv však vytvoríme inštanciu obrázka pomocou :

Potom nastavme hodnoty premenných na použitie tak, aby sa mohli kaskádovito prelínať s jeho obsahom. Farby, ktoré si vyberiete, vytvoria farebná schéma kreslenie. Keďže náš robot používa tri základné farby, budeme ich nazývať primárne , sekundárne a terciárne .

#robot-1 ( --primary-color: #0099CC; --secondary-color: #FFDF34; --terciary-color: #333; )

S týmito premennými môžete stále používať vlastnosti výplne a farby, ale zaobídete sa aj bez nich. Takže s farbami nastavenými v našich premenných vyzerá robot takto:

Môžete použiť toľko kópií obrázka, koľko chcete, a pre každú nastaviť rôzne farby, čím vytvoríte rôzne motívy. Toto je čiastočne užitočné, keď chcete upraviť štýl loga. rôzne cesty v závislosti od kontextu a v iných podobných prípadoch.

Ako už bolo spomenuté, prehliadače, ktoré nepodporujú premenné CSS, používajú dané prezentačné atribúty ako zálohu, zatiaľ čo prehliadače, ktoré podporujú CSS premenné použite ich na vyplnenie vlastnosti fill a prepísanie atribútov. Čo sa však stane, ak prehliadač podporuje premenné CSS, ale zabudli ste tieto premenné nastaviť vo svojich štýloch alebo sade nesprávna hodnota?

Pre nášho hipsterského robota sme nastavili tri premenné a nezávisí od nich len pár jeho fragmentov – veď bol pôvodne vyvinutý pre možné tematizovanie. Ak teda spustíte tento kód v prehliadači, ktorý podporuje premenné CSS a odstránite všetky deklarácie premenných, získate nasledujúci výstup:

Ak hodnoty premenných nie sú nastavené alebo správne, prehliadač použije svoju predvolenú farbu, ktorá je zvyčajne čierna pre výplň a ťah v SVG.

Môžete to obísť nastavením inej farby ako záložnej farby pre podporované prehliadače. Syntax premennej CSS vám to umožňuje: namiesto odovzdania názvu premennej ako argumentu do funkcie var() odovzdáte dva argumenty oddelené čiarkou – názov premennej a záložný prvok, v tomto prípade hodnotu pre prezentačný atribút .

Takže teraz náš kód robota vyzerá takto:

A to je všetko. Ak niektorú premennú ponecháte nenastavenú, prehliadač bude mať vždy nastavenú záložnú farbu. úžasné.

Pomocou tejto techniky môžete tohto robota zobraziť kdekoľvek na stránke s , nastavenie inej farby pre každú inštanciu, výsledkom čoho sú rôzne farebné motívy.

Môžete experimentovať s ukážkou, vytvoriť toľko kópií robota, koľko chcete, a vyfarbiť ho ľubovoľnými farbami - nezabudnite, že na to musíte použiť prehliadač, ktorý podporuje premenné CSS:

Ak si toto demo pozriete v prehliadači, ktorý podporuje CSS premenné, uvidíte okrem iného aj modrú a žltú verziu robota, ako sme nastavili v CSS premenných. V opačnom prípade uvidíte troch rovnakých robotov so záložnou farbou.

Zhrnutie

Bol to skvelý článok.

Využite silu kaskády CSS, upravte obsah uložený v tieni DOM sa stáva menej zložitým. A s premennými CSS (currentColor alebo užívateľské vlastnosti) sa môžeme dostať do tieňového DOM a prispôsobiť si grafiku, ako len chceme, pričom vytvoríme rezervu v prípade problémov.

Osobne sa mi veľmi páči kombinácia CSS premenných a SVG. Páči sa mi ich spoločná funkčnosť, najmä čo sa týka vytvorenia záložného mechanizmu.

Môžeme tiež získať iné spôsoby štýlovania obsahu v budúcnosti, keď budú pokračovať diskusie o používaní premenných CSS ako parametrov SVG - takže tento článok nepokryje všetko, čo je potrebné vedieť o tejto téme.

Práca s opakovane použiteľným obsahom SVG je jedným z ťažké otázky SVG, to súvisí so správaním a umiestnením klonovaného kódu. To vyvoláva množstvo súvisiacich problémov, ktoré sa môžu stať témou samostatných článkov.

CSS je každým dňom výkonnejšie, existuje veľa nových funkcií, pomocou ktorých môžete vytvárať používateľské rozhrania oveľa lahšie. A to je skvelé!

Jednou z takýchto funkcií v CSS sú filtre. Skúsme použiť filtre na prácu s obrázkami SVG.

CSS filtre

Najprv sa pozrime na filtre. Zahŕňajú nasledujúce funkcie:

• rozmazať()
• jas()
• kontrast()
• Vrhať tieň()
• odtiene sivej()
• hue-rotate()
• invertovať ()
• nepriehľadnosť()
• nasýtiť()
• sépia()

CSS filtre predstavujú najjednoduchší spôsob implementácie základných transformácií čo najefektívnejším spôsobom pre prehliadač.

Ak chcete vidieť, ako jednotlivé filtre fungujú, odporúčame navštíviť stránku: cssfilters.co.

Úprava pozadia SVG

Milujem používanie formátu SVG (škálovateľná vektorová grafika) na webe. SVG je skvelý obrazový formát pre web. Keď pridáte SVG na stránku, máte prístup ku každému prvku a vlastnostiam v nej. Umožňuje pridávať animácie, meniť farby, dynamicky pridávať informácie. SVG je tiež skvelé pre ikony.

SVG sa často používa ako obrázky na pozadí. V tomto prípade stratíte kontrolu nad prvkami obrázka. Teraz nemôžete meniť farby, vlastnosti, pretože SVG sa stáva normálnym obrázkom. Ale s pomocou CSS filtre môžete tento problém vyriešiť.

Ovládanie jasu

Prvá vec, s ktorou som sa pri práci s ikonami stretol, bola potreba stmaviť bielu ikonu na svetlom pozadí. Aby sa nevytvorila nová tmavá ikona, použil som filter: jas().

Hodnota jasu väčšia ako 1 spôsobí, že prvok bude svetlejší, hodnota menšia ako 1 spôsobí, že prvok bude tmavší.

Ikony s farbou #000 alebo rbg(0, 0, 0) nebude osvetlená. Musia mať akúkoľvek inú farbu.

Úprava farieb

Pozreli sme sa na to, ako zmeniť jas ikony. Čo ak však chceme zmeniť farbu ikony? V tomto prípade nám pomôže filter sépia, odtieň-otočiť, jas a nasýtenia vytvoriť akúkoľvek farbu, ktorú chceme.

Z bielej vytvoríte napríklad modrú, azúrovú a ružovú.

Colorize-pink ( filter: jas(0.5) sepia(1) hue-rotate(-70deg) saturate(5); ) .colorize-navy (filter: bright(0.2) sepia(1) hue-rotate(180deg) saturate( 5)

Kompatibilita

V čase písania tohto článku sú filtre podporované nasledujúcimi prehliadačmi:

Namiesto záveru

Nikdy nezabudnite na svojich používateľov. Zatiaľ nie všade filtre fungujú. Preto nepoužívajte biele ikony s filtrami na bielom pozadí, pretože niektorí používatelia jednoducho nič neuvidia. Tiež nezabudnite na alternatívny text pri obrázkoch.

SVG je vektorový grafický formát. Jeho názov doslova znamená „škálovateľný Vektorová grafika» (Škálovateľná vektorová grafika). Jednoducho povedané, s tým pracujete v Adobe Illustrator. SVG sa na webe ľahko používa, ale najprv je potrebné veľa pochopiť.

Prečo je SVG vôbec potrebné?

• Malé veľkosti súborov, vynikajúca kompresia;
• Škálovanie na ľubovoľnú veľkosť bez straty kvality (okrem veľmi malých veľkostí);
• Vyzerá dobre na sietnici;
• Rozsiahle možnosti, ktoré poskytujú filtre a interaktivita.

Vytvorme obrázok SVG, s ktorým budeme ďalej pracovať.

Vytvorte kresbu od ruky v aplikácii Adobe Illustrator. Tu je napríklad vták kiwi na ovále.

Všimnite si, že obrázok je orezaný okolo okrajov obrázka. Plátno je v SVG rovnako dôležité ako v PNG alebo JPG.

Adobe Illustrator možno uložiť ako SVG.

Pri ukladaní sa zobrazí ďalšie dialógové okno s nastaveniami. Úprimne povedané, nie som v nich veľmi dobrý. Existuje celý návod na profily SVG. S SVG 1.1 som celkom spokojný.

Tu stojí za zmienku, že máte možnosť kliknúť na tlačidlo OK a súbor uložiť, alebo môžete kliknúť na tlačidlo „Kód SVG...“, čím sa otvorí okno TextEdit (aspoň na počítači Mac) s kódom SVG.

Obe možnosti sa môžu hodiť.

V aplikácii Illustrator Pracovný priestor bolo 612px ✕ 502px.

Toto sú rozmery, ktoré bude mať obrázok na stránke, ak nie sú konkrétne špecifikované. Jeho veľkosť je možné zmeniť nastavením atribútov šírky alebo výšky pre img , rovnako ako pre PNG alebo JPG. Tu je príklad:

Podpora prehliadača

Jednou z možností je skontrolovať podporu cez Modernizr a nahradiť src pre obrázok:

David Bushell navrhol veľmi jednoduchú alternatívu, ak vám v značke nevadí JavaScript:

"this.onerror=null; this.src="obrazok.png"">

Na tento spôsob vloženia SVG môžete použiť nasledujúce triky na degradáciu:

A opäť pomocou Modernizr:

Pridanie SVG na stránku pomocou značky