Dowiedzieliśmy się, że ograniczeniem użycia do wstawienia fragmentu SVG jest to, że nie można pisać złożonych selektorów CSS, które mają tam wpływ. Na przykład:
Ta granica Shadow DOM zapobiega selektorom, takim jak
/* nope */ .parent .child ( )od pracy. Być może kiedyś otrzymamy działający selektor CSS do penetracji granicy Shadow DOM, ale w chwili pisania tego jeszcze nie ma.
Nadal możesz ustawić wypełnienie na rodzicu, a to spadnie kaskadowo w dół, ale to daje tylko jeden kolor (pamiętaj, aby nie ustawiać fillatrybutu prezentacji na tych kształtach!).
Fabrice Weinberg wymyślił jednak zgrabną technikę uzyskiwania dwóch kolorów, wykorzystując currentColorsłowo kluczowe w CSS.
Ustaw właściwość CSS wypełnienia dla dowolnych kształtów na currentColor:
.shape-1, .shape-2 ( fill: currentColor; )W ten sposób, kiedy ustawisz właściwość color na rodzicu , to również będzie przechodzić. Nie zrobi niczego sam z siebie (chyba że tam masz), ale currentColorjest oparty na nim, colorwięc możesz go użyć do innych rzeczy.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Próbny:
Zobacz logo Pen CodePen jako Inline SVG autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.