应用 CSS 过滤器时，内联 SVG 在 iOS 和 Safari 中消失

Question

情况是我有一个由Grunticon 生成并插入到DOM 中的内联SVG。它是灰色背景上的白色，带有阴影。

我为阴影使用了以下 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过滤器，任何过滤器似乎都有这种效果。

Codepen 上有一个演示，地址为 http://codepen.io/derekjohnson/pen/MyOaRY

这是否可以在 Safari 中运行？

Answer 1

令人烦恼的是这不起作用，但 Safari 毕竟是新的 IE！ :P

一种解决方法是将 SVG 包装在另一个元素中并对其应用过滤器。