Aprendimos que una limitación de usar para insertar un poco de SVG es que no se pueden escribir selectores CSS compuestos que afecten allí. Por ejemplo:
Ese límite DOM de sombra evita selectores como
/* nope */ .parent .child ( )de trabajar. Quizás algún día consigamos un selector de CSS que funcione para penetrar ese límite DOM de sombra, pero al momento de escribir estas líneas aún no está aquí.
Aún puede establecer el relleno en el padre y eso se reducirá en cascada, pero eso solo le da un color (¡recuerde no establecer el fillatributo de presentación en esas formas!).
Sin embargo, Fabrice Weinberg pensó en una pequeña técnica para obtener dos colores, explotando la currentColorpalabra clave en CSS.
Establezca la propiedad CSS de relleno en cualquier forma que desee en currentColor:
.shape-1, .shape-2 ( fill: currentColor; )De esa manera, cuando establezca la propiedad de color en el padre , eso también pasará en cascada. No hará nada por sí solo (a menos que lo tenga allí), pero currentColorse basa en colorpara que pueda usarlo para otras cosas.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Manifestación:
Vea el logotipo de Pen CodePen como SVG en línea de Chris Coyier (@chriscoyier) en CodePen.