Am aflat că o limitare a utilizării pentru a insera un pic de SVG este că nu puteți scrie selectoare CSS compuse care afectează acolo. De exemplu:
Acea graniță DOM umbră împiedică selectoarele de genul
/* nope */ .parent .child ( )de la lucru. Poate că într-o bună zi vom obține un selector CSS funcțional pentru a pătrunde în acea graniță umbra DOM, dar încă din acest moment nu este încă aici.
Puteți seta în continuare umplerea pe părinte și aceasta va scădea în cascadă, dar aceasta vă va oferi o singură culoare (nu uitați să nu setați fillatributul de prezentare pe acele forme!).
Fabrice Weinberg s-a gândit la o mică tehnică îngrijită pentru a obține două culori, totuși, exploatând currentColorcuvântul cheie din CSS.
Setați proprietatea de umplere CSS pe orice forme doriți să curent curent:
.shape-1, .shape-2 ( fill: currentColor; )În acest fel, când setați proprietatea de culoare pe părinte , aceasta va fi, de asemenea, în cascadă. Nu va face nimic singur (cu excepția cazului în care aveți acolo), dar currentColoreste bazat pe colorastfel încât să îl puteți folosi pentru alte lucruri.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Consultați sigla Pen CodePen ca Inline SVG de Chris Coyier (@chriscoyier) pe CodePen.