情况是我有Grunticon生成的内联SVG并插入到DOM中。它是带有阴影的灰色背景上的白色。
我使用以下CSS作为阴影：
svg {
-webkit-filter: drop-shadow(1px 1px 0 #141414);
filter: drop-shadow(1px 1px 0 #141414);
}
这适用于Chrome，Opera，Firefox以及我测试过的其他任何地方，除了iOS和桌面上的Safari。 CSS过滤器使SVG消失。
这不仅仅是drop-shadow过滤器，任何过滤器似乎都有这种效果。
在http://codepen.io/derekjohnson/pen/MyOaRY
的Codepen上进行了演示这可以解决它在Safari中的作用吗？
答案 0 :(得分：10)
恼人的说这不起作用，但Safari毕竟是新的IE！ ：P
解决方法是将SVG包装在另一个元素中并将过滤器应用于该元素。
答案 1 :(得分：1)
对于遇到此问题的每个人，请查看有关此问题的帖子，了解解决方案和调试问题的方法。
https://css-tricks.com/heres-how-i-solved-a-weird-bug-using-tried-and-true-debugging-strategies/
TLDR：该问题是由同一页面上的单独 svg 文件项中的两个或多个（匹配）id 属性引起的。因此，解决方法是为每个 SVG 文件中的每个属性分配一个唯一 ID。