svg过滤器悬停时无法在safari＆amp;铬

Question

我有美国地图，某些地区已分组。在每个区域悬停时，我都应用了一个阴影。在Firefox中运行得很好！但是在Safari中，svg对象组在悬停时消失，而在chrome中，什么都没发生。由于这是一种悬停效应，我无法将那些defs放在其他地方引用。对此有合理的解决方案吗？

这是我正在尝试使用的CSS：

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;

我将它应用于内联SVG图像中的一组形状。

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

上面引用的defs可以在示例here中看到。

Answer 1

嗯，经过一些实验，看起来在Chrome中，CSS过滤器还没有应用于SVG子元素，尽管它们确实适用于SVG元素本身。您必须使用SVG过滤器和一些JavaScript事件代码以旧式方式执行此操作。