Nous avons appris qu'une limitation de l'utilisation pour insérer un peu de SVG est que vous ne pouvez pas écrire de sélecteurs CSS composés qui affectent par là. Par exemple:
Cette frontière DOM shadow empêche les sélecteurs comme
/* nope */ .parent .child ( )de travailler. Peut-être qu'un jour nous aurons un sélecteur CSS fonctionnel pour pénétrer cette frontière du DOM shadow, mais au moment d'écrire ces lignes, il n'est pas encore là.
Vous pouvez toujours définir le remplissage sur le parent et cela descendra en cascade, mais cela ne vous donnera qu'une seule couleur (n'oubliez pas de ne pas définir l' fillattribut de présentation sur ces formes!).
Fabrice Weinberg a cependant pensé à une petite technique intéressante pour obtenir deux couleurs, en exploitant le currentColormot - clé en CSS.
Définissez la propriété CSS de remplissage sur toutes les formes que vous aimez sur currentColor:
.shape-1, .shape-2 ( fill: currentColor; )De cette façon, lorsque vous définissez la propriété de couleur sur le parent , cela se répercutera également. Il ne fera rien tout seul (à moins que vous ne l'ayez dedans), mais currentColorest basé sur colorpour que vous puissiez l'utiliser pour d'autres choses.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Démo:
Voir le logo Pen CodePen en SVG en ligne par Chris Coyier (@chriscoyier) sur CodePen.