为什么filter（shadow）导致我的SVG在Safari中消失？

小编典典

为什么filter（shadow）导致我的SVG在Safari中消失？

css

我正在使用D3.js开发应用程序。我被困了一段时间，最近又回来了。今天，我发现，尽管过去运行良好，但该应用程序中的SVG地图不再显示在移动Safari（iOS9.3.1）或桌面Safari（v9.1（11601.5.17.1））上。

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

如果您在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中进行了更改？

阅读 768

2020-05-16

共1个答案

小编典典

可能是有点晚了，但是以防万一我会把答案留给你。我在Safari中遇到了同样的问题，并且发现这似乎是Safari问题/错误。您可以解决该错误，只需将SVG标签与另一个HTML标签（如div）包装在一起，然后像在示例中一样，将阴影过滤器应用于此元素。在这里，您的示例已使用wrapper元素进行了修改

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

希望有帮助！

2020-05-16