How to apply a filter to an SVG image?

Question

css

jsfiddle.net/lilwondermelo/tsa9015b/
Q: How do I apply a filter to the entire image when hovering over only its elements? (In this case, polygons). That is, so that it does not work when hovering over a colorless background.
When you apply the filter to the group classes or the polygons themselves, nothing happens.
And is it possible to make the background of an SVG image transparent to a mouse click or remove it altogether?

Answer 1

That is, so that it does not work when hovering over a colorless background.

Well, do not apply hover to everything, but to the part where it is needed. Like this:
https://jsfiddle.net/tsa9015b/2/