Задать вопрос
@Genexys
фронтенделье
html

Как перекрасить иконку через svg > use?

Использую плагин gulp-svg-sprite для генерации спрайтов. Все собирает, работает как надо. Но когда вставляю элемент на страницу 
<svg class="qualities-list__img" width="78" height="78">
    <use xlink:href="#ico-qualities-1"></use>
  </svg>


то когда я пытаюсь поменять цвет указывая fill или stoke то он не меняется и вообще ничего не происходит
  • Вопрос задан
  • 372 просмотра
3 комментария
Подписаться 1 Средний 3 комментария
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Иконка хреновая.
Ее стоило обработать в люстре, это занимает пару минут.



код иконки
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M248.4,0c4.9,0,9.8,0,14.8,0c0.9,0.1,1.8,0.4,2.7,0.4c15.5,0.4,30.7,2.5,45.8,5.8c29.2,6.5,56.5,17.8,81.8,33.9
		c0.5,0.3,1.1,0.6,1.7,0.9c4.7-4.7,9.4-9.4,14-14c12.3-12.3,31.2-12.4,43.5-0.2c11,10.8,21.9,21.7,32.7,32.7
		c7.9,8,10.4,17.6,8.1,28.5c-1.2,5.7-4,10.6-8.1,14.6c-3,3-7.4,3.7-11.2,1.9c-3.7-1.7-5.9-5.4-5.7-9.5c0.2-2.7,1.4-4.8,3.1-6.8
		c3.9-4.4,3.9-10.5-0.2-14.7c-10.9-11-21.9-22-32.9-32.9c-4.4-4.4-10.7-4.2-15.2,0.2c-3.6,3.5-7.1,7.1-10.6,10.6
		c-0.4,0.4-0.6,0.9-0.9,1.2c52,41.3,85.1,94,96.3,159.5c11.2,65.4-1.5,126.4-36.9,182.7c0.5,0.5,0.9,1,1.3,1.5
		c4.2,4.2,8.3,8.4,12.5,12.6c12.4,12.4,12.4,31.3,0.1,43.6c-10.8,10.8-21.5,21.6-32.4,32.3c-7.9,7.8-17.4,10.6-28.2,8.5
		c-5.9-1.1-10.9-3.9-15.1-8.2c-5.4-5.6-2.9-14.7,4.6-16.6c3.6-0.9,6.7,0.1,9.5,2.6c4.8,4.3,10.7,4.1,15.2-0.3
		c10.8-10.8,21.6-21.6,32.3-32.4c0.9-0.9,1.6-1.9,2.2-2.9c2.1-4.1,1.5-8.8-1.9-12.3c-3.6-3.8-7.4-7.4-11.1-11.2
		c-0.2-0.2-0.5-0.4-0.8-0.6c-41.2,52-94,85.1-159.6,96.4c-65.5,11.3-126.6-1.6-182.9-37c-0.6,0.5-1.1,1-1.7,1.5
		c-4.1,4.1-8.1,8.1-12.2,12.2c-12.7,12.5-31.4,12.5-44-0.1c-10.6-10.6-21.2-21.2-31.8-31.8c-7.3-7.3-10.4-16.1-9.1-26.4
		c0.9-6.7,3.8-12.5,8.7-17.3c2.8-2.8,6.2-3.5,10-2.3c3.6,1.2,5.9,3.8,6.6,7.6c0.7,3.4-0.3,6.3-2.7,8.8c-2.1,2.3-3.2,4.9-3.1,8
		c0.1,3.2,1.6,5.6,3.7,7.8c10.5,10.5,21,21,31.5,31.5c0.3,0.3,0.7,0.7,1.1,1c4.3,3.7,10.2,3.8,14.3-0.1c4.1-3.8,7.9-7.9,11.8-11.8
		c0.1-0.1,0.1-0.3,0.1-0.4c-51.9-41.3-85-94.1-96.3-159.6c-11.2-65.5,1.8-126.4,37-182.7c-0.6-0.6-1.1-1.2-1.7-1.8
		c-4.1-4.1-8.1-8.1-12.2-12.2c-12.4-12.5-12.4-31.4,0-43.8C37.7,48.5,48.4,37.9,59,27.3c5.2-5.3,11.4-8.5,18.8-9.3
		c9.8-1,18.3,2,25.2,9.1c2.1,2.2,2.9,4.9,2.5,7.9c-0.5,3.8-2.6,6.5-6.2,7.9c-3.7,1.4-7.1,0.8-10.1-1.7c-0.2-0.2-0.4-0.3-0.6-0.5
		c-4.9-4.3-10.7-4.2-15.4,0.4C62.6,51.7,52.1,62.4,41.3,72.8c-4.5,4.4-5,11.7,0,16.4c3.4,3.2,6.6,6.6,9.9,9.9c0.4,0.4,1,0.8,1.4,1.2
		c0.2-0.2,0.4-0.3,0.5-0.4c0.6-0.8,1.2-1.5,1.8-2.3c29.5-37.1,66.4-64.2,110.7-81.1c25.9-9.9,52.8-15.3,80.6-16.1
		C247,0.4,247.7,0.1,248.4,0z M113.5,256.1c-0.1,78.3,63.5,141.9,141.3,142.5c79.1,0.7,143.9-63.5,143.8-142.5
		c0-78.8-64.1-142.9-142.7-142.7C177,113.7,113.5,177.3,113.5,256.1z M309.9,486c42.8-10.3,79.9-30.6,111.2-61.2
		c32.7-32,54.2-70.3,65-115.2c-1.3,0-2.2,0-3,0c-18.1,0-36.2,0-54.4,0c-1,0-2,0-2.9-0.1c-4.7-0.4-8.3-4-8.9-8.8
		c-0.5-4.4,2.3-9,6.6-10.4c1.5-0.5,3.1-0.6,4.6-0.6c19.5,0,39,0,58.6,0c1,0,1.9,0,3.1,0c3.2-22.7,3.2-45.2,0-67.6
		c-5.6-0.6-72.7-0.3-74.6,0.3c7.6,39.8,2.4,77.7-17.6,113.1c-20,35.4-49.6,59.7-87.7,73.7C309.9,434.8,309.9,460.2,309.9,486z
		 M289.7,415c-39.9,7.6-77.8,2.5-113.2-17.5c-35.5-20-59.8-49.6-74-87.9c-0.8,0-1.7,0-2.5,0c-24.5,0.1-49,0.1-73.5,0.2
		c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0.1-0.1,0.1-0.2,0.4c7.6,32.1,21.4,61.5,41.4,87.9c23.2,30.7,52.3,54.3,87,71
		c15.2,7.3,31,12.9,47.8,16.7c0-1.4,0-2.3,0-3.3c0-18.1,0-36.2,0-54.4c0-0.7,0-1.5,0-2.2c0.4-5.1,4.4-9.1,9.4-9.3
		c5.2-0.2,9.5,3.4,10.2,8.6c0.2,1.2,0.2,2.5,0.2,3.7c0,19.2,0,38.4,0,57.5c0,1,0,1.9,0,3.1c22.7,3.2,45.1,3.2,67.5,0
		C289.7,464.7,289.7,439.9,289.7,415z M202.2,26.3c-86.5,19-157.3,90.8-175.9,176c1,0,2,0,3,0c18.1,0,36.2,0,54.4,0
		c0.8,0,1.6,0,2.5,0c5,0.4,8.7,4.1,9.3,8.9c0.5,4.5-2.3,8.9-6.7,10.3c-1.4,0.4-2.9,0.5-4.4,0.5c-19.7,0-39.4,0-59,0
		c-0.9,0-1.9,0.1-2.8,0.1c-3.3,16.1-3.2,58.8,0.2,67.5c24.7,0,49.5,0,74.4,0c-7.7-39.9-2.5-77.8,17.5-113.2
		c20-35.5,49.6-59.8,87.7-73.8C202.2,77.1,202.2,51.7,202.2,26.3z M222.3,97c39.9-7.7,77.8-2.5,113.2,17.5
		c35.4,20,59.7,49.5,73.8,87.5c3.5,0.5,74.7,0.3,76.4-0.2c-19.2-86.5-90.9-157-176-175.6c0,1,0,2,0,2.9c0,18.1,0,36.2,0,54.4
		c0,1,0,2-0.1,2.9c-0.5,4.9-4.4,8.6-9.4,8.8c-4.7,0.2-9-3-10-7.7c-0.3-1.3-0.3-2.6-0.3-3.9c0-19.5,0-39,0-58.5
		c0-0.9-0.1-1.9-0.1-2.8c-19.4-3.2-58-3-67.4,0.2C222.3,47.3,222.3,72.1,222.3,97z"/>
</svg>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
victory_vas
@victory_vas
Видимо, fill или stroke уже указаны в коде самой иконки и переопределяют стили, которые указываете вы. Эти атрибуты из кода иконки надо убрать перед сборкой в спрайт (вручную или инструметами типа svgo). Можно также заменить значение этих атрибутов на currentColor и затем в css для иконки указывать свойсто color, которому будет соответствовать значение currentColor.
Ответ написан
7 комментариев
7 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 120 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Периодически возникает ошибка при включении сайта на open server
25 дек. 2024, в 02:45
1000 руб./за проект
Разработать нативное приложение под iOS
25 дек. 2024, в 00:52
150000 руб./за проект
Правки WP
24 дек. 2024, в 23:35
11000 руб./за проект
Ещё заказы