我正在使用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,.4) );
filter: drop-shadow( 2px 2px 4px rgba(0,.4) );
}
任何人都可以建议为什么这不起作用？我做错了什么,或者在Safari中有什么变化？
解决方法
可能有点晚了,但万一我会留给你答案.我遇到了与Safari相同的问题,我发现这似乎是一个Safari问题/ bug.您可以解决此错误,只需将SVG标记与另一个HTML标记(如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,.4) );
}
希望有所帮助！
