为什么过滤器(阴影)导致我的 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) ) 上.

我提取了 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));过滤器:阴影(2px 2px 4px rgba(0,0,0,.4))；}

谁能建议为什么这不起作用?是我做错了什么，还是 Safari 有什么变化?

解决方案

可能有点晚了，但以防万一我会留下我的答案.我在 Safari 上遇到了同样的问题，我发现这似乎是 Safari 的问题/错误.您可以解决此错误，只需将您的 SVG 标记与另一个 HTML 标记(如 div)包装在一起，并像您在示例中所做的那样将阴影过滤器应用于此元素.在这里，您使用包装元素

修改了示例

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

<svg>...</svg>
//CSS.svg 包装器 {-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4));过滤器:阴影(2px 2px 4px rgba(0,0,0,.4))；}

希望有帮助！

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) ).

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

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)

The style rule is very straightforward:

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?

解决方案

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

Hope that helps!

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