SVG：Drop-Shadow 过滤器在移动 Safari 上对 SVG 进行像素化答案

【问题标题】：SVG: Drop-Shadow filter pixelates SVG on mobile SafariSVG：Drop-Shadow 过滤器在移动 Safari 上对 SVG 进行像素化
【发布时间】：2013-01-17 20:01:24
【问题描述】：

我在使用img 标签嵌入的 SVG 文件中使用投影过滤器。在我的 MacBook 上，它在 Safari 中看起来不错。但是，在移动版 Safari 中，图像会变得非常像素化并失去其所有清晰度。未应用过滤器时，SVG 渲染良好。除了传递过滤器之外，还有什么方法可以解决这个问题？

【问题讨论】：

标签： svg safari mobile-safari vector-graphics svg-filters

【解决方案1】：

您应该尝试将过滤器的"filterRes" 属性显式设置为与视网膜显示匹配的值。

【讨论】：

是的，我在另一个有类似问题的问题中看到，您建议的值为 400。我只是尝试过，我也尝试了更高的值，但它没有改变任何东西，我'我害怕。此外，整个图形都会像素化，而不仅仅是阴影。
"400" 答案是一种 hack，用于减少 windows 的 Firefox 中的条带伪影 - 它是故意产生像素化的。您应该尝试 1136 x 640 以在 iPhone 5 上查看结果。也就是说 - 我听说移动 safari 中的 SVG 支持尚未针对视网膜完全更新，因此像素化是一个真正的错误，而不仅仅是一个错误.
我也有同样的问题。使用 filterRes 基本上使 SVG 分辨率/大小再次依赖，这消除了使用 SVG 的全部意义。有一个孤立的 WebKit 错误报告：bugs.webkit.org/show_bug.cgi?id=119300
filterRes 已被浏览器弃用，正在逐步淘汰，因此您不能再依赖它了。此外，浏览器决定在 GPU 上进行的缩放转换通常是基于位图的，并且会在高比例下像素化 - 即使您从矢量图形开始。

【解决方案2】：

这个问题在 2018 年仍然存在，我已经找到了解决方案。您可以复制您提供过滤器的元素，将其放置在实际元素下方，并仅在其上保留过滤器，而不在元素上使用任何过滤器。这样，Safari 和其他浏览器在调整大小时只会对带有阴影的元素进行光栅化，但它会被锐利的矢量元素隐藏。您可以查看示例并阅读更多内容here。

【讨论】：

这对我来说不太有效，它仍然显得模糊，因为后面阴影元素的柔软边缘仍然在清晰的前面元素之外流血

【解决方案3】：

不幸的是，我为此尝试了所有建议的解决方法，但都没有奏效，唯一对我有用的是将 svg 内联，而不是作为 img 标签。

很惊讶这个问题似乎已经存在了这么久！

【讨论】：

【解决方案4】：

现在是 2021 年，它仍然很重要。我找到了一个对我有用的解决方法：您可以放大 svg，然后使用 css-transform 将其缩小：

.section_logo img {
    height: 500%;
    transform-origin: top left;
    transform: scale(0.2);
}

【讨论】：

这是一个 hack，但有时当浏览器错误多年未修复时，您必须这样做。这是迄今为止最简单的解决方法，谢谢！