SVG 在 Safari 中显示模糊答案

【问题标题】：SVGs are displaying blurry in SafariSVG 在 Safari 中显示模糊
【发布时间】：2020-07-26 19:36:18
【问题描述】：

我正在开发一个网站并决定尝试 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 中放大/缩小时，模糊消失了。我的代码中有什么我没有做的吗？任何帮助将非常感激。谢谢！

【问题讨论】：

同样的问题，你用的是哪个版本的Safari？
@FranciscoSalvador 当时我使用的是当前版本的 Safari。自从我发布此问题以来，它可能已经更新。

标签： html svg safari

【解决方案1】：

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

【讨论】：

为我工作！

【解决方案2】：

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

【讨论】：

我的 SVG 没有模糊效果，但我不确定过滤器；将不得不仔细检查。至于 svg 标签，如果我使用 object 标签来显示 svg，那么我是否需要 svg 标签？我想我没有，因为除了 Safari 中的模糊之外，仅使用我的 object 和 img 标签就可以正常工作。
我们尝试了shape-rendering="geometricPrecision" 并正在github.com/timmywil/panzoom/issues/548 讨论它。似乎很难解决。也尝试了转换解决方案，但还没有成功。