I Shar

I Shar

мир глазами веб-разработчика

CSS: currentColor для svg

возможности использования ключевого слова currentColor для svg-изображений

I Shar

время чтения 3 мин.

Photo by Harley-Davidson on Unsplash

Несколько дней назад Вы могли прочитать статью о использовании ключевого слова currentColor для создания расширяемых компонентов - “CSS: currentColor”. Однако, currentColor можно применять и для svg-изображений.

fill для SVG

Допустим, есть монохромное svg-изображение, и Вы хотите, чтобы оно было одинакового цвета с основным текстом.

Возьмем картинку с деревом ( ):


 


Если атрибуты fill и stroke не определены, дерево будет черным (#000000) - это цвет по умолчанию.

Например, цвет текста на сайте “темно-угольный” (#272727), если Вы хотите, чтобы svg-изображение было такого же цвета, нужно задать соответствующее значение цвета для атрибута fill тега path:


 


Динамический цвет для SVG

Вышеприведенный подход несомненно работает. Но как поступить, если возникнет необходимость добавить такую картинку в параграф с текстом другого цвета например, зеленого.

Это мой зеленый текст

В данном случае цвет текста #009900. Вам придется еще раз изменить значение параметра fill для изображения:


 


Теперь картинка и текст одного цвета. А что делать, если это будет ссылка: при наведении цвета опять не будут совпадать.

Именно в таких случаях ключевое слово currentColor будет Вашим спасением. Его можно использовать в качестве значения атрибута fill: цвет svg-картинки будет соответствовать цвету текста:


 
  
 
 Это моя ссылка


Это очень хороший и, что важно, очень востребованный трюк.

Когда не нужно использовать currentColor

В некоторых случаях использование значения currentColor для атрибута fill неуместно. Например, если изображение является логотипом и должно сохранять свой специфический цвет независимо от контекста и действий, совершаемых на сайте.


Спасибо за внимание.

    • frontend
    • css
    • svg

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.