Мы узнали, что ограничение использования для вставки небольшого количества SVG состоит в том, что вы не можете писать составные селекторы CSS, которые влияют на них. Например:
Эта теневая граница DOM предотвращает такие селекторы, как
/* nope */ .parent .child ( )от работы. Возможно, однажды мы получим рабочий CSS-селектор, который преодолеет эту теневую границу DOM, но на момент написания этой статьи его еще нет.
Вы по-прежнему можете установить заливку для родительского элемента, и она будет проходить каскадом вниз, но это даст вам только один цвет (не забудьте не устанавливать fillатрибут представления для этих фигур!).
Фабрис Вайнберг придумал небольшую изящную технику получения двух цветов, используя currentColorключевое слово в CSS.
Установите свойство CSS fill для любых фигур на 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 как встроенный SVG Криса Койера (@chriscoyier) на CodePen.