悬停时的svg过滤器在Safari和Chrome中不起作用答案

【问题标题】：svg filter on hover not working in safari & chrome悬停时的svg过滤器在Safari和Chrome中不起作用
【发布时间】：2016-09-12 23:25:06
【问题描述】：

我有一张美国地图，其中包含某些地区的分组。在每个区域悬停时，我应用了阴影。在 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中看到。

【问题讨论】：

您想从其他人那里获得免费帮助，但您在提供足够信息方面付出了 0 努力。阅读如何提出问题
首先，我知道如何提问。但是，也就是说，我可以提供更多信息，但您不必对此感到讨厌。简单地说，“您没有提供足够的信息来提供足够的答案”。
没有更多代码，很难回答，但请记住，SVG 元素子项不了解 z-index，并且 filter 和 -webkit-filter 的顺序应该颠倒。总是以不带前缀的结尾。
还需要多少代码？我的意思是，这就是图像的基本结构。全美国的许多个人团体。将所有内容粘贴到此处将是……好吧，不允许。大声笑我不是要难。我问是因为我真的很想知道我可以提供哪些更多信息来提供帮助。尽管我已经尝试过您的建议，但前缀项目的顺序不会对其在 Safari 和 Chrome 中的显示方式产生不利影响。它没有解决问题。
发布一个可以工作的最小测试用例很有帮助，这样人们就可以在 codepen 或 jsfiddle 中打开它并使用它。

【解决方案1】：

好吧，经过一些实验，看起来在 Chrome 中，CSS 过滤器尚未应用于 SVG 子元素，尽管它们确实应用于 SVG 元素本身。您必须使用 SVG 过滤器和一些 JavaScript 事件代码以老式方式进行操作。

【讨论】：