Как управлять свойствами SVG из CSS?

Question

[Emptyform]

Я хочу из CSS менять цвет обводки в SVG. К примеру, при наведении мышки на иконку.
Насколько я понял, это возможно лишь в том случае если код SVG вставить прямо в HTML в то место где должна быть картинка, а затем задать ей имя класса и можно манипулировать ее свойствами из CSS.

Правильно ли я понял, что нет никаких вариантов манипулировать свойствами SVG, если он в отдельном файле (SVG-спрайт) ?

Answer 1

[Николай]

Почему же. Даже при вставке через <use></use> будет всё работать. Только учитывайте, что inline стили имеют приоритет.

Comments

[Kirill Sharonov]

Разве use можно задавать внутри кода HTML? Разве он не используется только внутри SVG? Или внутри HTML можно ссылаться на SVG через USE? При подключении через Img понятное дело проблемно со стилями по некоторым вопросам получается, но первое все-таки непонятно.

[Николай]

можно ссылаться на файлик (работает не всё, например не работает закраска svg градиентами), либо подключать svg к body документа и тогда ссылаться как в случае с SVG(работает всё более менее). В ИЕ всё плохо.

[Emptyform]

Николай Николай, я вставляю картинку так : .my-icon { background-image: url(../img/twitter.svg); ... } и хочу чтобы при наведеннии мыши картинка перекрашивалась. Пишу .my-icon:hover { fill: red }
Не работает. В чем засада?

[Николай]

Emptyform: в таком варианте работать не будет. Менять стили у SVG элементов можно только при условии, что они являются элементами DOM. В этом случае ( как и в случае с встраивания не происходит).

[Николай]

* Как и в случае с IMG. (Тостер скушал)