0

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.

Community
  • 1
  • 1
Laura Sage
  • 33
  • 7
  • You want free help from other people but you put 0 effort in giving sufficient information. Read on how to ask a question – Frutis May 17 '16 at 02:58
  • First, I know how to ask a question. However, that said, I can provide MORE information, but you don't have to be nasty about it. Simply say, "you haven't provided enough information for an adequate answer". – Laura Sage May 17 '16 at 03:01
  • Without more of your code, it's hard to answer, but remember that SVG element children do not understand z-index, and the order of filter and -webkit-filter should be reversed. Always end with the unprefixed. – Michael Mullany May 18 '16 at 02:07
  • How much more of the code is needed? I mean, that's the basic structure of the image right there. Lots of individual groupings of all the united states. To paste all of that here would be...well, not allowed. LOL I'm not asking to be difficult. I'm asking because I'd really like to know what more information I can give to be helpful. The order of the prefixed items wouldn't be adversely affecting how it appears in Safari and Chrome, although I have tried your suggestion. It did nothing to solve the issue. – Laura Sage May 18 '16 at 02:46
  • Well it's helpful to post a working minimal test case, so people can pop it open in codepen or jsfiddle and play with it. – Michael Mullany May 18 '16 at 04:55

1 Answers1

0

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.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Ok. Well that makes sense since there are definitely quite a few child elements...there would have to be. {le sigh} Thank you. – Laura Sage May 20 '16 at 05:01