Изменить fill svg из спрайта при наведении на блок?

Question

[Nimbus1996]

Ребят, проблема шо пипец.
Мне необходимо при наведении на карточку своеобразную изменять цвет svg. но svg не простая а целая картинка отрисованная, она очень обширная и вставлять её инлайн вообще не айс, я сделал спрайт из трёх таких картинок и вставил с помощью use, НО мне при наведении нужно изменить fill у path в этом svg и ничего не получается.
Подскажите как можно сделать, перерыл весь инет, всё перепробовал и ничего не получается.

Answer 1

[Максим]

С use есть проблемы - даже в современных браузерах так как shadow-root(closet)
Лучше вставить через object и навести то есть hover/mousemove
Или же в SVG подключить css file и javascript file и делать наведение hover или mousemove

Comments

[Nimbus1996]

Не могли бы Вы скинуть какую-нибудь статью про то, как вставить файл со стилями в svg,а то я так не пойму))

[Максим]

Nimbus1996,
это выше заголовка svg

<?xml-stylesheet type="text/css" href="svgstyle.css"?>

это перед закрывающим тегом svg

<script xlink:href="mycode.js" />

либо так внутри самого svg

<script><![CDATA[
     for (var i=0; i<10; ++i )
  ]]></script>

[Nimbus1996]

И ещё, вот если цвет я смогу изменить, но дизайнер придумал штуку, что изображение, на которое навели оно становится зелёным и увеличивается немного, как это реализовать? Через scale не получится ведь, потому что оно во все стороны увеличится, а мне надо, чтобы изображение прижато к низу

[Nimbus1996]

Много Чего, для наглядности закинул на хостинг, там реализовано все через смену background, но как видите идёт подгрузка и изображения пропадают
alexandersh-dev.h1n.ru

[Максим]

Nimbus1996, вы код покажите - я не могу гадать - всё индивидуально

[Максим]

Nimbus1996, можно вставить (в случае если не хотите засорять html) то вставить ваш svg в во внешний javascript и просто вывести( то есть сделать innerHTML) в нужное место

[Nimbus1996]

Я опять же не знаю как это реализовывается)) можно ссылку для наглядности и в пару слов описать?

[Максим]

Nimbus1996, нету - я это сам придумал но могу показать на вашем компе по удалёнке

[Nimbus1996]

Если я правильно понимаю, то переменную объявить, в неё закинуть svg и при hover подставлять через innerhtml? А скакать так же как сейчас не будет?

[Максим]

Nimbus1996, что такое скакать ? фактически это будет частью html - к примеру делаете блок - (к примеру class="forSvg") в js создаём переменную/константу и пишете так

let mySvg = `yor svg`;
document.querySelector(".forSvg").innerHTML = mySvg;

и всё, в вашем html будет пусто но в инспекторе будет ваш svg и он будет отображаться

[Максим]

Nimbus1996, а hover на css делается вот так: https://codepen.io/topicstarter/pen/MWbjNJJ

[Nimbus1996]

Спасибо за подробное объяснение, думаю всё получится;)

Answer 2

[fallus]

1. Вариант.
Если это действительно svg-спрайт, то желательно в нём удалить всякие fill и stroke атрибуты вовсе.
И задать их с помощью css.
Как мне кажется, обращаться стоит так:
svg > use{ fill: red }

2. В спрайте(или даже если это картинка <img src="mysvg.svg" />) значения атрибутов fill и stroke заменить на css-переменные.
fill="var(--myColor1)" stroke="var(--myColor2)"

Ну и менять их при наведении:

.myBlock{
--myColor1: red;
--myColor2: green
}

.myBlock:hover{
--myColor1: blue;
--myColor2: aqua
}