Aprendemos que uma limitação do uso para inserir um pouco de SVG é que você não pode escrever seletores CSS compostos que afetam por meio deles. Por exemplo:
Esse limite de sombra DOM impede seletores como
/* nope */ .parent .child ( )de trabalhar. Talvez um dia consigamos um seletor CSS funcional para penetrar nos limites do DOM da sombra, mas, no momento em que escrevo, ele ainda não está aqui.
Você ainda pode definir o preenchimento no pai e isso irá se espalhar, mas isso só lhe dá uma cor (lembre-se de não definir o fillatributo de apresentação nessas formas!).
Fabrice Weinberg pensou em uma pequena técnica bacana para obter duas cores, explorando a currentColorpalavra - chave em CSS.
Defina a propriedade CSS de preenchimento em qualquer forma que desejar para currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Dessa forma, quando você definir a propriedade color no pai , isso também entrará em cascata. Ele não fará nada sozinho (a menos que você tenha feito isso), mas currentColoré baseado em colorpara que você possa usá-lo para outras coisas.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Veja o logotipo da Pen CodePen como Inline SVG de Chris Coyier (@chriscoyier) na CodePen.