SVG 在 Safari 中显示模糊

Question

我正在开发一个网站，并决定尝试一下 SVG。我的 SVG 在 IE、Firefox 和 Chrome 中按应有的方式显示。然而，在 Safari 中，图像看起来很模糊。这是我在代码中所做的事情：

<object data="section_3.svg" type="image/svg+xml" width="100%" height="722" class="aligncenter" >
    <img src="section_3.png" />
    <svg version="1.1" x="0px" y="0px" width="763" height="1602" viewBox="0 0 763 1602" preserveAspectRatio="xMinYMin meet"></svg>
</object>

对于我的一生，我无法弄清楚为什么图像是模糊的。奇怪的是，当我在 Safari 中放大/缩小时，模糊现象就消失了。我的代码中有什么没有做的事情吗？任何帮助将非常感激。谢谢！

Answer 1

添加-webkit-transform: translate3d(0,0,0)到 SVG 解决了我的问题。

Answer 2

如果您的 svg 包含水平和垂直直线，当您放大和缩小时，它们可能会随机模糊或锐化，因为它们必须在屏幕上选择最佳像素集，尽管这是一般浏览器的问题，而不是 Safari 的问题。众所周知，Safari 不支持滤镜或模糊效果，但我不知道你的 svg 里面有什么。您的对象标签有意义，您的后备 .png 也有意义，但我不明白为什么您的 svg 标签没有内容。