Научихме, че ограничението за използване за вмъкване на малко SVG е, че не можете да пишете съставни CSS селектори, които влияят от там. Например:
Тази DOM граница на сенките предотвратява селектори като
/* nope */ .parent .child ( )от работа. Може би някой ден ще получим работещ CSS селектор, за да проникнем в тази DOM граница на сянката, но към момента на писане това още не е тук.
Все още можете да зададете запълването на родителя и това ще се каскадира надолу, но това ви дава само един цвят (не забравяйте да не задавате презентационния fillатрибут на тези фигури!).
Фабрис Уайнбърг помисли за една малка техника, за да получи два цвята, използвайки currentColorключовата дума в CSS.
Задайте свойството за запълване CSS на всички форми, които харесвате, на currentColor:
.shape-1, .shape-2 ( fill: currentColor; )По този начин, когато зададете свойството цвят на родителя , това също ще каскадира. Той няма да направи нищо само по себе си (освен ако нямате там), но currentColorсе базира на, colorза да можете да го използвате за други неща.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Демонстрация:
Вижте логото на Pen CodePen като Inline SVG от Chris Coyier (@chriscoyier) на CodePen.