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

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

Answer 2

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

SVG在Safari中显示模糊

2 个答案: