Dozvedeli sme sa, že obmedzením použitia na vloženie časti SVG je to, že nemôžete písať zložené selektory CSS, ktoré by to ovplyvnili. Napríklad:
Táto tieňová hranica DOM bráni selektorom ako
/* nope */ .parent .child ( )z práce. Možno jedného dňa dostaneme funkčný selektor CSS, ktorý prenikne cez túto tieňovú hranicu DOM, ale v tomto písaní ešte nie je.
Stále môžete nastaviť výplň na nadradenej položke a tá sa bude kaskádovito prepínať, ale získate iba jednu farbu (nezabudnite fillna tieto tvary nenastaviť atribút prezentácie !).
Fabrice Weinberg myslel na úhľadnú malú techniku na získanie dvoch farieb, pričom využil currentColorkľúčové slovo v CSS.
Vlastnosť CSS výplne nastavte na ľubovoľné tvary, ktoré sa vám páčia, do currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Týmto spôsobom, keď nastavíte vlastnosť farby na nadradenej položke , bude tiež kaskádovo prechádzať. Nebude to nič robiť samo o sebe (pokiaľ tam nemáte), ale currentColorje založené na tom, coloraby ste to mohli použiť na iné veci.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Ukážka:
Logo Pen CodePen nájdete ako Inline SVG od Chrisa Coyiera (@chriscoyier) na serveri CodePen.