为什么过滤器（阴影）导致我的SVG在Safari中消失？ [英] Why is filter(drop-shadow) causing my SVG to disappear in Safari?

问题描述

我正在使用D3.js开发一个应用程序。我被侧线了一段时间，最近回来了。今天我发现，虽然它的工作正常，在过去，应用程序中的SVG地图不再显示在移动Safari（iOS 9.3.1）或桌面Safari（v9.1（11601.5.17.1））。

I am developing an app using D3.js. I was sidetracked for a while, and recently came back to it. Today I found that, though it worked fine in the past, the SVG map in the app no longer displays on mobile Safari (iOS 9.3.1) or desktop Safari (v9.1 (11601.5.17.1) ).

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

I extracted the SVG and a single style rule and put them on CodePen to illustrate what happens. In Chrome, this pen will look fine. In Safari, it will be completely blank.

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

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

If you inspect the DOM in Safari, you find that the paths are there, and they are the right shapes. They just seem invisible. Unchecking the style rules in the inspector causes the entire map to magically appear (without the drop shadow, obviously)

样式规则非常简单：

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

任何人都可以建议为什么这不工作？

Can anyone suggest why this isn't working? Did I do something wrong, or has something changed in Safari?

推荐答案

可能有点晚了，给你我的答案。我有同样的问题，Safari和我想出，这似乎是一个Safari的问题/错误。您可以解决这个错误只是包装您的SVG标签与另一个HTML标签像div，并应用于这个元素的阴影过滤器，就像你的例子。
此处您使用wrapper元素修改示例

Probably is a little late, but just in case I will leave you my answer. I had the same problem with Safari and I figured out that this seems to be a Safari issue/bug. You can work around this bug just wrapping your SVG tag with another HTML tag like a div and apply to this element the drop-shadow filter as you did in your example. Here you have your example modified with the wrapper element

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) );
}

希望有所帮助！

这篇关于为什么过滤器（阴影）导致我的SVG在Safari中消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！