应用CSS滤镜后，行内SVG在iOS和Safari中消失了。

Question

情况是我有一个内联SVG，由Grunticon生成并插入到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中工作吗？

- Derek Johnson

---

是的，但你在这里有什么问题？ - Robert Longson

如何使其不消失！将更新问题以进行澄清 :) - Derek Johnson

当 UA 是 Safari 时，请将其删除。例如：https://dev59.com/imQo5IYBdhLWcg3wE74J - Robert Longson

Answer 1

这很烦人，但毕竟Safari是新的IE啊！ :P

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

- Matt Stow

---

这个 Safari 行为是否存在一个公开的 bug？我想知道它何时会得到解决。 - zevnicsca

似乎在Safari技术预览版中已经修复了，所以我们只需要等一下。 - Matt Stow

你如何在无数不更新任何东西的用户中“稍等一下”？ - Gherman

我在使用CSS中的filter:url(#id)来为通过<use>标签调用的SVG着色时，遇到了与stripe相同的问题。奇怪的是，SVG在一个页面上运行得很好，但是同样的代码在另一个页面上却无法工作。无法弄清楚原因。 - Gevorg Hakobyan