我正在使用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) );
filter: drop-shadow( 2px 2px 4px rgba(0,0,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,0,0,.4) );
filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}
希望有所帮助！
浏览器以不同的方式计算事物，并且出于某种原因，Safari讨厌你。大声笑。
但是，您应该使用SVG过滤器。它们更可靠。
<svg height="140" width="140">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
希望有所帮助！
我在Safari中遇到了类似的问题：一旦应用滤镜效果，线条等SVG对象就会消失。相同的代码在Chrome和Firefox中运行良好。该代码是Angular应用程序的一部分。事实证明，问题是由Angular采用“基础”标签引发的。
Safari似乎将基本标签应用于嵌入式SVG图像中的片段名称，而Chrome和Firefox则不然。此代码说明了此问题：
<html>
<head>
<base href="/">
</head>
<body>
<svg>
<filter filterUnits="userSpaceOnUse" id="glow">
<feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
</filter>
<line x2="99" y2="99" stroke="red" filter="url(#glow)"></line>
<line y1="99" x2="99" stroke="green" filter="url(/_display/#glow)"></line>
</svg>
</body>
</html>
在Safari上，只显示绿线，而Chrome和Mozilla显示红线和绿线。
就我而言，我使用的是SVG过滤器，所以我无法真正应用CSS解决方案。相反，我能够通过在页面加载后通过Javascript应用CSS转换来显示SVG。这是普通JS中的一个例子：
setTimeout(function(){
document.getElementById("svg-element").style.display = "block";
},10);
如果您想知道这是否有效，请在调整浏览器大小或使用检查器修改CSS样式规则后查看SVG是否显示。
当发生这种情况时，我还有加载指示器从不停止旋转。此外，当在单独的窗口中打开带有设置阴影的样式标记的SVG时，没有阴影。解决方案是使用SVG过滤器，并确保复制设置它的元素，以便在调整图像大小时，移动safari不会像素化它。例如，如此处所述https://stackoverflow.com/a/52250105/1267201