情况是我有一个内联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中工作吗?