Abbiamo appreso che una limitazione dell'utilizzo per inserire un po 'di SVG è che non è possibile scrivere selettori CSS composti che influiscono su di essi. Per esempio:
Quel confine ombra DOM impedisce selettori come
/* nope */ .parent .child ( )dal lavoro. Forse un giorno avremo un selettore CSS funzionante per penetrare quel confine shadow DOM, ma al momento della stesura di questo articolo non è ancora qui.
Puoi ancora impostare il riempimento sul genitore e questo verrà applicato a cascata, ma questo ti darà solo un colore (ricorda di non impostare l' fillattributo di presentazione su quelle forme!).
Fabrice Weinberg ha pensato a una piccola tecnica precisa per ottenere due colori, sfruttando la currentColorparola chiave nei CSS.
Imposta la proprietà CSS di riempimento su qualsiasi forma che desideri su currentColor:
.shape-1, .shape-2 ( fill: currentColor; )In questo modo, quando imposti la proprietà del colore sul genitore , anche questo verrà applicato a cascata. Non farà nulla da solo (a meno che tu non abbia lì dentro), ma currentColorsi basa su colorcosì puoi usarlo per altre cose.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Visualizza il logo Pen CodePen come SVG in linea di Chris Coyier (@chriscoyier) su CodePen.