为什么 filter(drop-shadow) 导致我的 SVG 在 Safari 中消失？

Question

我正在使用 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 中发生了某些变化？

Answer 1

浏览器的计算方式不同，出于某种原因，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>

希望对您有所帮助！

Answer 2

可能有点晚了，但以防万一我会留下我的答案。我在 Safari 上遇到了同样的问题，我发现这似乎是一个 Safari issue/bug。您可以解决这个错误，只需用另一个 HTML 标签包裹您的 SVG 标签，例如 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) );
}

希望对您有所帮助！

Answer 3

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

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

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

Answer 4

发生这种情况时，我的加载指示器也一直在旋转。此外，当带有设置阴影的样式标签的 SVG 在单独的 window 中打开时，没有阴影。解决方案是使用 SVG 过滤器，并确保复制设置它的元素，这样如果调整图像大小，移动版 safari 就不会像素化它。例如，如此处所述

Answer 5

我在使用 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

Answer 6

我在 Angular 应用程序中遇到了同样的问题，因为我们使用了 <base> 标签。

我将这个添加到控制器中：

$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

为什么 filter(drop-shadow) 导致我的 SVG 在 Safari 中消失？

Why is filter(drop-shadow) causing my SVG to disappear in Safari?

css

safari

svg

mobile-safari

css-filters