css – 为什么过滤器(drop-shadow)会导致我的SVG在Safari中消失？

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 为什么过滤器(drop-shadow)会导致我的SVG在Safari中消失？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用D3.js开发一个应用程序.我被搁置了一段时间,最近回到了它.今天我发现虽然它在过去运行良好,但应用程序中的SVG地图不再显示在移动版Safari(iOS 9.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,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,.4) );
}

任何人都可以建议为什么这不起作用？我做错了什么,或者在Safari中有什么变化？

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

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

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

希望有所帮助！

大佬总结

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

猜你在找的CSS相关文章