Как правильно менять цвет svg-шкам через css?

Question

[Егор Живагин]

Сколько раз не получалось уже... Я где-то туплю, господа.
Есть страничка. Svg вставлена через <img src="foo.svg"> чтобы не дублировать код. Дэфолтный цвет задан в коде самой svg через fill="". Вопрос: а можно ли мне изменить его через CSS? Вот сейчас хочу по hover-у менять цвет svg, например.

Если вдруг таким способом это делать нельзя, то буду благодарен за любые варианты, кроме "вставить в HTML 18 раз одну и ту же svg" :)

Answer 1

[Alexander Belov]

https://css-tricks.com/almanac/properties/f/fill/

Comments

[Егор Живагин]

Спасибо, конечно, но я-то вставляю через (см. описание вопроса). В этом и сложность.

[Егор Живагин]

*через img

[Alexander Belov]

Krasnodar_etc: stackoverflow.com/questions/24933430/img-src-svg-c...

Answer 2

[Ivan Bogachev]

codepen

Comments

[Егор Живагин]

Спасибо, конечно, но я-то вставляю через (см. описание вопроса). В этом и сложность.

[Егор Живагин]

*через img

Answer 3

[Victor]

Насколько я понимаю, Вам нужно привести это к инлайн-свг.
Например так.

Comments

[Егор Живагин]

Вот это интереснее... Хотя, всё равно получается, что код дублируется, если несколько свг. Спасибо!

Answer 4

[Максим]

codepen.io/Geyan/pen/egRwQx здесь надеюсь всё ясненько

ruseller.com/lessons.php?id=1944&rub=2 мануальчик

Comments

[Александр Виноградов]

А как менять цвет SVG без встраивания в основной HTML, а подключая, как картинку?

[Максим]

Ruchey: не пробовал так но думаю что не будет работать

[Егор Живагин]

Ruchey: Максим Ленский: верно, я тогда всё переискал. Абсолютно никак. И это логично. Как вариант - выше предлагали скрипт для инлайн-свг

У меня проект на Node + Express, поэтому моим решением было просто положить свг в отдельный ejs-файл и вставлять его куда угодно через partial

Answer 5

[Егор Поляков]

Посмотрите урок > тут явно задано через CSS замена классом данных из CDATA:
https://bundlespace.com/intro/lessons/lesson-desig...