svg filter on hover not working in safari & chrome

Question

I have a US map with certain regions grouped. On hover of each region, I've applied a drop-shadow. Works great in Firefox! But in Safari, the group of svg objects disappears on hover, and in chrome, nothing at all happens. Since this is a hover effect I can't put those defs in that are referenced elsewhere. Is there a reasonable solution to this?

This is the CSS I'm trying to use:

filter: drop-shadow( 5px 5px 3px rgba(0,0,0,0.5) );
-webkit-filter: drop-shadow( 5px 5px 3px rgba(0,0,0,0.5) );
z-index: 1;

I am applying it to a group of shapes within an inlined SVG image.

<g id="auc">
    <polygon id="x">
    <polygon id="xx">
    <path id="xxx">
</g>

The defs referenced above can be seen in an example here.

Answer 1

Well, after some experiments, it looks like in Chrome, CSS filters don't yet apply to SVG child elements, although they do apply to the SVG element itself. You'll have to do it the old fashioned way with an SVG Filter and some JavaScript event code.