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

Question

[Ves Mir]

Вопрос популярный и очень больной. Актуального решения не нашел.

Суть:
Вставил спрайт, SVG отобразилась, но перемешались цвета (в проекте много svg).
Грешу, что классы спрайта перебивают друг друга, но инспектор показывает, что у элементов SVG нет стилей.
Fill никак не назначается через CSS

<svg viewBox="20 0 100 100" class="sideBlock__image">
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#51_1"></use>
</svg>

Инспектор:



Мольбы:
Прочитал все возможные статьи по теме. Наведите слепого на тумбу. Уже не первый день проблему ковыряю!

Comments

[RAX7]

Воспроизведи проблему в песочнице https://codepen.io/, из кусков скриншотов ничего не понятно.
И наверное не стоит название id начинать с цифры xlink:href="#51_1"

Несмотря на то, что в HTML5 ограничение было снято, для совместимости ID должен начинаться с латинской буквы.
https://developer.mozilla.org/ru/docs/Web/HTML/%D0...

Answer 1

[Максим]

Попробуй задать inherit для path. Ты меняешь fill для самого свг, а во вложенных элементах может быть прописана своя заливка и твое свойство не проваливается дальше. UPD. Попробуй svg path { fill: inherit; } у меня после этого заработало управление заливкой через css, и ссылка на хорошую статью по теме prgssr.ru/development/oformlenie-soderzhimogo-use-...

Comments

[Ves Mir]

path {
fill: inherit;
}

Не проходит shadow-root

Answer 2

[strelok011]

Добавлю еще - у выделенного path назначен класс stg, т.к. это сделано внутри svg, там же следует для начала искать список классов. Наверняка там же персонально для каждого элемента в спрайте прописаны свойства.