Change fill svg from sprite on block hover?

Question

css

Guys, the problem is that pipets.
I need to change the color of the svg when hovering over a card. but the svg is not simple, but the whole picture is drawn, it is very extensive and inserting it inline is not ice at all, I made a sprite of three such pictures and inserted using use, BUT I need to change the fill of the path in this svg on hover and nothing happens.
Tell me how you can do it, rummaged through the entire Internet, tried everything and nothing happens.

Answer 1

There are problems with use - even in modern browsers, since shadow-root (closet)
It is better to insert through an object and hover, that is, hover / mousemove
Or, in SVG, connect css file and javascript file and hover or mousemove

Answer 2

1. Option.
If this is indeed an svg sprite, then it is desirable to remove all fill and stroke attributes from it altogether.
And set them with css.
It seems to me that it is worth addressing as follows: 2. In the sprite (or even if it is a picture ), the values ​​of the fill and stroke attributes should be replaced with css variables. Well, change them on hover:
svg > use{ fill: red }
fill="var(--myColor1)" stroke="var(--myColor2)"

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

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