We hebben geleerd dat een beperking van het gebruik om een beetje SVG in te voegen, is dat je geen samengestelde CSS-selectors kunt schrijven die daar doorheen werken. Bijvoorbeeld:
Die schaduw-DOM-grens voorkomt selectors zoals
/* nope */ .parent .child ( )van werken. Misschien krijgen we op een dag een werkende CSS-selector om die schaduw-DOM-grens te doorbreken, maar op het moment van schrijven is hij er nog niet.
Je kunt nog steeds de vulling op de ouder instellen en dat zal trapsgewijs doorlopen, maar dat levert je maar één kleur op (vergeet niet om het presentatiekenmerk niet fillop die vormen in te stellen!).
Fabrice Weinberg bedacht echter een handige kleine techniek om twee kleuren te krijgen, gebruikmakend van het currentColorsleutelwoord in CSS.
Stel de fill CSS-eigenschap in op alle vormen die u leuk vindt om currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Op die manier, wanneer u de kleureigenschap op de ouder instelt , zal dat ook doorlopen. Het doet niets vanzelf (tenzij je het erin hebt ), maar het currentColoris gebaseerd op colorzodat je het voor andere dingen kunt gebruiken.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Zie het Pen CodePen-logo als Inline SVG door Chris Coyier (@chriscoyier) op CodePen.