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

Posted 2023-03-06

【中文标题】应用 CSS 过滤器时，内联 SVG 在 iOS 和 Safari 中消失

【英文标题】：Inline SVG disappears in iOSand Safari when a CSS filter is applied

【发布时间】：2016-07-24 06:09:57

【问题描述】：

情况是我有一个由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 中运行？

【问题讨论】：

是的，但是您的问题是什么？

如何让它不消失！将更新 q 以进行澄清:)

当 safari 是 UA 时删除它。例如***.com/questions/16348489/…

【参考方案1】：

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

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

【讨论】：

Safari 中的这种行为是否存在未解决的错误？我想知道什么时候会解决。

它似乎已在 Safari Technology Preview 中修复，所以我们只需稍等片刻

面对无数不会更新任何东西的用户，你如何“稍等一下”？

我有同样的问题，在 css 中使用带有 filter:url(#id) 的条纹来为通过 标签调用的 svg 着色。奇怪的是，svg 在一个页面上就像一个魅力，而相同的代码在另一页上不起作用。不知道为什么。