Saimme tietää, että SVG: n lisäämisen käytön rajoitus on, että et voi kirjoittaa yhdistettyjä CSS-valitsimia, jotka vaikuttavat siellä. Esimerkiksi:
Tämä varjoinen DOM-raja estää valitsimia, kuten
/* nope */ .parent .child ( )työskentelemästä. Ehkä jonain päivänä saamme toimivan CSS-valitsimen tunkeutumaan varjon DOM-rajaan, mutta kirjoituksen aikana se ei ole vielä täällä.
Voit silti asettaa täytön vanhemmalle ja se siirtyy alaspäin, mutta se saa sinut vain yhden värin (muista olla asettamatta fillesitysmääritettä näille muodoille!)
Fabrice Weinberg ajatteli siistiä tekniikkaa kahden värin saamiseksi, hyödyntämällä currentColorCSS: n avainsanaa.
Määritä täyttö CSS -ominaisuus haluamillesi muodoille currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Tällä tavoin, kun asetat väriominaisuuden vanhemmalle , se myös kulkee läpi. Se ei tee mitään yksin (ellei sinulla ole siellä), mutta currentColorse perustuu siihen, colorettä voit käyttää sitä muihin asioihin.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Esittely:
Katso Chris Coyierin (@chriscoyier) kynä CodePen-logo Inline SVG: ksi CodePenissä.