svg过滤器悬停在safari＆chrome中不起作用

我有一个美国地图，其中某些地区已分组。在每个地区悬停时，我应用了阴影。在Firefox中很棒！但在Safari中，这组svg对象在悬停时消失，并且在chrome中什么也没有发生。由于这是一个悬停效应，我不能把这些defs在别处引用。有没有合理的解决方案？svg过滤器悬停在safari＆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中看到。

来源

2016-05-17 Laura Sage

你想要其他人的免费帮助，但你付出了努力提供足够的信息。阅读如何提出问题 – Frutis

首先，我知道如何提出问题。然而，那就是说，我可以提供更多的信息，但是你不必讨厌它。简单地说，“你没有提供足够的信息来获得足够的答案”。 –

没有更多的代码，很难回答，但请记住，SVG元素的孩子不理解z-index，并且过滤器和-webkit-过滤器的顺序应该颠倒过来。总是以前缀结束。 –

好了，经过一些实验，看起来像在Chrome中，CSS过滤器还不适用于SVG子元素，尽管它们确实适用于SVG元素本身。您必须使用SVG过滤器和一些JavaScript事件代码以旧式的方式来完成。

来源

2016-05-18 05:06:02

好的。那么这是有道理的，因为肯定有很多孩子的元素......就必须有。 {le叹气}谢谢。 –

svg过滤器悬停在safari＆chrome中不起作用

回答

相关问题