Internet Explorer无法识别SVG元素的CSS

我有一个SVG图像地图，链接上有悬停样式

（有关SVG图像映射的详细信息。）

我测试过的所有值得尊敬的浏览器都正确显示了它

IE一点也没有（惊喜！）

（我只关心IE11，而不是超古老的版本。）

由于，我知道IE可以显示剪辑路径，只要它们是SVG标记的一部分，并且没有添加CSS样式

在我的例子中，因为它是一个图像贴图，所以剪辑路径在锚定标记内。也许这就是IE被搞糊涂的原因，但我还没有读到任何不支持IE的地方

以下是我所做的（确认在Firefox、Chrome、Safari和Opera中工作）：

答：林克，
a:参观了{
不透明度：0；
}
a:悬停，
a:主动的{
不透明度：1；
过渡特性：不透明度；
过渡时间：0.4s；
过渡定时功能：易进易出；
}
.去饱和{
过滤器：url（“去饱和”）；
}

答案是

对于SVG中的不透明度转换，IE需要不透明度大于零！ 否则它就会抛出它，比如“Heyyyy，不需要这个看不见的东西！”尽管它被告知需要一个转换：

transitionproperty:opacity

以下是一个在IE11中工作的片段：



/*  */
我尝试使用IE 11检查问题，我能够解决问题，但没有找到解决此问题的有效方法。从文档中，我发现，“当在SVG元素上设置HTML CSS属性时，浏览器可能会有不同的行为，例如Edge&IE浏览器不会响应height属性，而Chrome会响应。”查看已知问题参考：@Deepak MSFT感谢您的关注。这是一个很好的观点，它在caniuse上的措辞。没有关于所说的“不同行为”的详细信息的文档是令人沮丧的。@Deepak MSFT我想我已经明白了！将再做一点测试，并将答案放在一起。@Deepak MSFT完成！^我希望这可以避免其他人花费和我一样多的时间来解决这个问题。
a.hover_area:link, a.hover_area:visited {opacity: 0.001}