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

Question

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

score 0 · Accepted Answer

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

1 回答 1