Задать вопрос
svupol
@svupol
svg

Как изменить стили SVG при использовании спрайта?

Здесь задавался точно такой же вопрос, но год назад и ответа там нет.

В чем суть. Я собираю svg иконки в спрайт, перед этим удаляя атрибуты fill, stroke, style.

Подключаю следующим образом: 
<svg class="icon icon-name ">
    <use xlink:href="path/to/sprite.svg#name"></use>
</svg>

Иконка из спрайта берется, все подключается, но как понимаю, я не могу изменить стили определенного path, или все же как-то могу?
  • Вопрос задан
  • 418 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
werty1001
@werty1001
undefined
При использовании use содержимое будет в Shadow DOM, он изолирован и изменить стили определенного узла из вне нельзя.

- Можно изменять цвет, толщину границы, размеры но для всей иконки в целом.
- С помощью currentColor можно задать сразу 2 цвета.
- Если браузер умеет в CSS переменные, то можно красить иконки как хочешь.
- В будущем возможно будет псевдо-селектор ::shadow, который позволит влезать в Shadow DOM, но это не точно.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
PHP Backend Developer
Bcash Greece Inc • Афины
от 140 000 до 190 000 ₽
Swift developer Middle/Middle+ удаленно
presto.heads
До 150 000 ₽
Buyer таргетированной рекламы в TikTok Удаленно
The Core
от 60 000 до 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Завершение разработки проекта на CS2
25 апр. 2024, в 20:02
100000 руб./за проект
Требуется завершить backend (проектная работа)
25 апр. 2024, в 19:42
49000 руб./за проект
Проверить тест по Data Science
25 апр. 2024, в 19:41
2000 руб./за проект
Ещё заказы