1

У меня есть код:

<div class="service">
   <img src="../img/write.svg">
</div>

и есть файл write.svg с содержимым:

<?xml version="1.0" encoding="UTF-8"?> <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 50 50.5" style="enable-background:new 0 0 50 50.5;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} </style> <g> <path class="st0" d="M44.4,48.1l-7.7-7.7V30.3L16.2,9.7l-0.1-0.1c-2-1.6-6.7-3.5-10.6,0.4C0.7,14.8,3,19.9,4.3,21.4 c1.1,1.4,19.6,19.9,20.3,20.7l0.3,0.3l10.4-0.5l6.3,6.2h-9.2v2h15v-2H44.4z M34.7,38.5l-4.9-4.8v-7.4l4.9,4.9V38.5z M13.8,28.4h7.8 l5.1,5h-7.9C17.1,31.7,15.4,30,13.8,28.4z M19.6,26.4h-7.8c-2-2.1-3.8-3.8-4.9-5h7.6L19.6,26.4z M22.8,26.7v-7.5l5,5v7.5L22.8,26.7 z M20.8,17.2v7.5l-5-4.9v-7.6L20.8,17.2z M6.9,11.4c1.3-1.3,2.6-1.7,3.8-1.7c1.2,0,2.3,0.4,3.1,0.8v7.2l-4.5-4.5l-1.4,1.4l4.7,4.7 H5.3C4.6,18,3.6,14.8,6.9,11.4z M25.7,40.4c-1.3-1.3-3-3.1-5-5h8l4.6,4.6L25.7,40.4z"></path> <rect x="25" y="48.1" class="st0" width="5" height="2"></rect> <rect x="17.5" y="48.1" class="st0" width="5" height="2"></rect> <rect x="10" y="48.1" class="st0" width="5" height="2"></rect> <rect x="2.6" y="48.1" class="st0" width="5" height="2"></rect> </g> </svg> 

Это иконка белого цвета. Я знаю, что можно заменить fill:#FFFFFF; на fill:currentColor; и тогда цвет иконки будет такой, как определено во внешнем css файле. Но на практике так и не смог изменить её цвет. Подскажите пожалуйста, как нужно изменить svg и css, чтобы цветом иконки можно было управлять из css и делать его разным в разных местах сайта?

10
  • ru.stackoverflow.com/a/893127/265406 - должно работать для любых изображений
    – UModeL
    21 авг 2020 в 3:25
  • Спасибо за ссылку. К сожалению, мне не подошёл ни один из вариантов. Я не могу задавать адрес svg в css и я не смог подобрать нужный оттенок через filter (вообще бред какой-то, "вращение цветового круга до нужного оттенка" - это же подбор цвета вслепую, да и насыщенность выше некоторого предела (подозреаю, что это насыщенность сепии) поднять не смог. Мне нужно превратить белый в #E10000. Не получилось.
    – Ostet
    21 авг 2020 в 7:10
  • 1
    вообще перекрасить svg таким образом так себе затея ..если хотите изменять на тот цвет который вам надо используйте либо svg как код в html либо как object 21 авг 2020 в 9:30
  • @Ostet: я не занимаюсь копипастой, поэтому слово "бред" адресовано прямиком мне. "...насыщенность выше ... поднять не смог" о_0
    – UModeL
    21 авг 2020 в 11:02
  • 1
    @MaximLensky: ну, так img то привычнее ;-)
    – UModeL
    21 авг 2020 в 11:07

1 ответ 1

3

Если Вы вставляете svg c помощью <img>, то будьте готовы к трудностям, ограничениям и "костылям". Не вижу большой проблемы в подборе цвета "на глаз":

div { background-repeat: no-repeat; background-image: radial-gradient(at top left, #f00a 50%, transparent 50.5%), radial-gradient(at top right, #fa0a 50%, transparent 50.5%), radial-gradient(at bottom right, #080a 50%, transparent 50.5%), radial-gradient(at bottom left, #00fa 50%, transparent 50.5%); }

img { height: 150px; width: 150px; }

.red    { filter: invert(1) sepia(1) hue-rotate(290deg) saturate(281)  brightness(0.877); }
.yellow { filter: invert(1) sepia(1) hue-rotate(315deg) saturate(281)  brightness(0.977); }
.green  { filter: invert(1) sepia(1) hue-rotate(60deg)  saturate(281)  brightness(0.677); }
.blue   { filter: invert(1) sepia(1) hue-rotate(179deg) saturate(2500) brightness(0.777); }
<div class="service">
  <img src="http://umodel.narod.ru/shareweb/image/write.svg" class="red">
  <img src="http://umodel.narod.ru/shareweb/image/write.svg" class="yellow">
  <img src="http://umodel.narod.ru/shareweb/image/write.svg" class="green">
  <img src="http://umodel.narod.ru/shareweb/image/write.svg" class="blue">
</div>

2
  • 1
    Спасибо за пример с решением. Насколько я понял, мне нужно убрать из моих svg кусок <style type="text/css"> .st0{fill:#FFFFFF;} </style>, тогда этот код работает. Ещё раз спасибо, помечу его, как решение.
    – Ostet
    21 авг 2020 в 11:30
  • @Ostet: да, уберите все классы и стайлы - они малопригодны при такой вставке.
    – UModeL
    21 авг 2020 в 11:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.