应用CSS过滤器后，嵌入式SVG在iOS和Safari中消失 [英] Inline SVG disappears in iOSand Safari when a CSS filter is applied

问题描述

这种情况是，我有一个 Grunticon 生成的内嵌SVG，并已插入到DOM中.它是带有阴影的灰色背景上的白色.

The situation is I have an inline SVG generated by Grunticon and inserted into the DOM. It's white on a grey background with a drop-shadow.

我为阴影使用了以下CSS:

I used the following CSS for the shadow:

svg {
  -webkit-filter: drop-shadow(1px 1px 0 #141414);
  filter: drop-shadow(1px 1px 0 #141414);
}

此功能在Chrome，Opera，Firefox和我测试过的其他任何地方都可以正常使用，但iOS和台式机上的Safari除外.CSS过滤器使SVG消失.

This works fine in Chrome, Opera, Firefox and everywhere else I've tested it, except Safari on iOS and desktop. The CSS filter makes the SVG disappear.

它也不只是 shadow 过滤器，任何过滤器似乎都具有这种效果.

It's not just the drop-shadow filter either, any filter seems to have this effect.

Codepen上的演示位于 http://codepen.io/derekjohnson/pen/MyOaRY

A demo is on Codepen at http://codepen.io/derekjohnson/pen/MyOaRY

可以使其全面运行以使其在Safari中正常工作吗?

Can this be worked round to make it work in Safari?

推荐答案

令人讨厌的是，它毕竟不起作用，但Safari毕竟是新的IE！:P

Annoying that this doesn't work, but Safari is the new IE after all! :P

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

A workaround is to wrap the SVG in another element and apply the filter to that.

这篇关于应用CSS过滤器后，嵌入式SVG在iOS和Safari中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！