Zjistili jsme, že omezení použití k vložení trochu SVG spočívá v tom, že nemůžete psát složené selektory CSS, které by to ovlivnily. Například:
Tato stínová hranice DOM brání selektorům jako
/* nope */ .parent .child ( )z práce. Možná jednoho dne dostaneme funkční selektor CSS, který pronikne touto stínovou hranicí DOM, ale od tohoto psaní tu ještě není.
Stále můžete nastavit výplň na nadřazené a to bude kaskádovitě procházet dolů, ale tím získáte pouze jednu barvu (nezapomeňte fillna tyto tvary nenastavit atribut prezentace !).
Fabrice Weinberg přemýšlel o úhledné malé technice, jak získat dvě barvy, využívající currentColorklíčové slovo v CSS.
Nastavte vlastnost CSS výplně na jakékoli tvary, které se vám líbí, na currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Tímto způsobem, když nastavíte vlastnost barvy na nadřazené , bude také kaskádovitě procházet. Neudělá nic samo o sobě (pokud tam nemáte ), ale currentColorje založeno na colortom, abyste jej mohli použít k jiným věcem.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Ukázka:
Podívejte se na logo Pen CodePen jako Inline SVG od Chrisa Coyiera (@chriscoyier) na CodePen.