Styling SVG with CSS?

Question

css

I have an SVG icon with the following structure:
< symbol>
< path class='bg'>
< path class='icon'>
< /symbol>
Using CSS I set transparency to classes, depending on the state (hover), here is an example:
https://jsfiddle.net/yr0rd57b/2/
For some reason it works in Firefox and doesn't work in Safari, Opera (maybe other browsers too).
How to fix or advise, maybe somehow organize the icon in a different way? Ah, yes! Another transition-effect must work, because of this, the structure of the icon turned out like this.

Answer 1

Try to embed svg not as a link, but directly:<a><svg>...</svg></a>

Answer 2

I don’t know how much this will help you, but in this article they write that at the moment we cannot directly access the Shadow DOM through CSS, this is not supported by all browsers (Chromium does not support for example)
A little more about this problem here
And yes, this one The bug is already in the chromium bug tracker - link
Maybe someday they will fix it.
And there is a working example, I did not go into subtleties, but try to dissect

Answer 3

CSS - used for styling
for everything. js