css - 悬停时的 svg 过滤器在 safari 和 chrome 中不起作用

Question

我有一张美国 map ，其中对某些地区进行了分组。在悬停每个区域时，我应用了一个阴影。在 Firefox 中运行良好!但在 Safari 中，svg 对象组在悬停时消失，而在 chrome 中，什么也没有发生。由于这是悬停效果，我无法将那些在其他地方引用的定义放入其中。对此有合理的解决方案吗？

这是我尝试使用的 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 事件代码以老式方式完成此操作。