为什么过滤器（阴影）导致我的 SVG 在 Safari 中消失？答案

【问题标题】：Why is filter(drop-shadow) causing my SVG to disappear in Safari?为什么过滤器（阴影）导致我的 SVG 在 Safari 中消失？
【发布时间】：2016-08-10 20:39:15
【问题描述】：

我正在使用 D3.js 开发应用程序。我有一段时间被转移了，最近又回来了。今天我发现，虽然过去运行良好，但应用程序中的 SVG 地图不再显示在移动版 Safari (iOS 9.3.1) 或桌面版 Safari (v9.1 (11601.5.17.1) ) 上。

我提取了 SVG 和单个样式规则并将它们放在 CodePen 上以说明发生了什么。在 Chrome 中，这支笔看起来不错。在 Safari 中，它将完全空白。

https://codepen.io/Kirkman/pen/pyKzeX

如果您在 Safari 中检查 DOM，您会发现路径在那里，并且它们的形状正确。他们只是看起来不可见。在检查器中取消选中样式规则会导致整个地图神奇地出现（显然没有阴影）

样式规则很简单：

svg {
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}

谁能建议为什么这不起作用？是我做错了什么，还是在 Safari 中发生了一些变化？

【问题讨论】：

我在 2016 年向 Apple 提交了一份错误报告，他们说他们在 iOS 11 中修复了这个问题。bugreport.apple.com/web/?problemID=25788891

标签： css svg safari mobile-safari css-filters

【解决方案1】：

由于我们使用了<base> 标签，我在 Angular 应用中遇到了同样的问题。

我将它添加到控制器中：

$scope.basePath = window.location.href;

然后在模板中我添加了过滤器的基本路径：

<g ng-attr-filter="url({{basePath}}#filter1_d)">

希望这可以帮助任何使用 Angular 的人。查看 Github 中的此评论以获取更多信息：https://github.com/airbnb/lottie-web/issues/360#issuecomment-320243980

【讨论】：

【解决方案2】：

我在 Safari 中遇到了类似的问题：一旦应用了滤镜效果，线条等 SVG 对象就会消失。相同的代码在 Chrome 和 Firefox 中运行良好。该代码是 Angular 应用程序的一部分。原来问题是由 Angular 使用“base”标签触发的。

Safari 似乎将基本标记应用于嵌入的 SVG 图像中的片段名称，而 Chrome 和 Firefox 则没有。这段代码说明了这个问题：

<html>
 <head>
  <base href="/">
 </head>
 <body>
  <svg>
   <filter filterUnits="userSpaceOnUse" id="glow">
      <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
   </filter>
   <line x2="99" y2="99" stroke="red" filter="url(#glow)"></line>
   <line y1="99" x2="99" stroke="green" filter="url(/_display/#glow)"></line>
  </svg>
 </body>
</html>

在 Safari 上，只会显示绿线，而 Chrome 和 Mozilla 会显示红线和绿线。

jsfiddle demonstrating the problem

【讨论】：

事实证明这对我来说是破坏 svg 过滤器的原因。您是否为此找到了解决方法？如果能够在 Safari 中同时使用 <base> 和 svg 过滤器，那就太好了。
我知道的唯一解决方法是在过滤器 url 中指定一个绝对路径（如第二个示例所示）。如果过滤器是在 Javascript 中创建的，您可以简单地在相对路径前加上 window.location 以使其成为绝对路径。我确实向 Apple 提交了错误报告，但尚未收到回复。

【解决方案3】：

当这种情况发生时，我的加载指示器也永远不会停止旋转。此外，当带有设置阴影的样式标签的 SVG 在单独的窗口中打开时，没有阴影。解决方案是使用 SVG 过滤器，并确保复制设置它的元素，以便在调整图像大小时，移动 safari 不会对其进行像素化。例如，如此处所述https://stackoverflow.com/a/52250105/1267201

【讨论】：

【解决方案4】：

就我而言，我使用的是 SVG 过滤器，因此我无法真正应用 CSS 解决方案。相反，我能够在页面加载后通过 Javascript 应用 CSS 转换来显示 SVG。下面是一个普通 JS 的例子：

setTimeout(function(){
 document.getElementById("svg-element").style.display = "block";
},10);

如果您想知道这是否可行，请查看在您调整浏览器大小或使用检查器修改 CSS 样式规则后是否显示 SVG。

【讨论】：

【解决方案5】：

可能有点晚了，但以防万一我会给你我的答案。我对 Safari 也有同样的问题，我发现这似乎是一个 Safari 问题/错误。您可以解决此错误，只需将您的 SVG 标记与另一个 HTML 标记（如 div）包装起来，然后像在示例中所做的那样将阴影过滤器应用于此元素。在这里，您使用包装器元素修改了示例

https://codepen.io/mauromjg/pen/rLaqWG

<div class="svg-wrapper">
    <svg>...</svg>
</div>

//CSS
.svg-wrapper {
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}

希望有帮助！

【讨论】：

这似乎是完美的解决方法。我会试一试，可能会选择这个作为答案。
这对我来说效果很好。这应该是公认的答案
非常感谢这个解决方案，超级简单，超级干净。应该是公认的答案。
在 iOS 上（在 web 视图或 Safari 本身中——在 11.3 下测试），似乎这种解决方法可能会导致一些间歇性损坏效果和屏幕撕裂，类似于here 所描述的，这不是立即显而易见的.只是提醒一下。
这似乎不是一种解决方法（或至少不再是）。将样式放在 svg 上而不是 codepen 中的包装器上会导致放大时相同的模糊 svg。codepen.io/sarahannnicholson/pen/abvYvEp 与 codepen.io/mauromjg/pen/rLaqWG 在 Safari 移动设备中会导致相同的模糊 svg。

【解决方案6】：

浏览器计算方式不同，出于某种原因，Safari 讨厌你。哈哈。

但是，您应该改用 SVG 过滤器。它们更可靠。

SOURCE - w3schools

 <svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

希望有帮助！

【讨论】：

经过一些调整，这段代码就可以工作了。但结果不如 CSS 解决方案干净。一个问题是我的一些 SVG 多边形填充了条纹而不是纯色，这导致阴影在这些特定多边形附近看起来更亮。
可以在here 找到类似但稍好一些的技术。仍然有亮度问题，但如果你使用灰色阴影而不是黑色阴影，它就不那么明显了。