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

Question

情况是我有一个由 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滤镜，任何滤镜似乎都有这种效果。

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

是否可以解决此问题以使其在 Safari 中工作？

Answer 1

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

解决方法是将 SVG 包裹在另一个元素中，然后对其应用过滤器。