4

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

4

4 回答 4

2

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

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

于 2020-02-04T12:53:57.977 回答
1

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

于 2013-02-03T05:34:11.923 回答
1

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

于 2018-09-10T01:54:18.080 回答
1

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

.section_logo img {
    height: 500%;
    transform-origin: top left;
    transform: scale(0.2);
}
于 2021-04-21T08:29:30.063 回答