logo标签列表

SVG: 在移动版Safari上使用Drop-Shadow滤镜会使SVG呈现像素化

svgsafarimobile-safarivector-graphicssvg-filters
6

我正在使用一个内嵌在标签中的SVG文件中的投影滤镜。在我的MacBook上，在Safari浏览器中看起来很好。然而，在移动版Safari中，图形变得非常有锯齿和失去了锐度。当未应用该滤镜时，SVG呈现良好。除了放弃使用该过滤器外，是否有其他方法可以修复这个问题？

4个回答
2

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

这对我来说并不完全有效，因为阴影元素的柔和边缘仍然会从清晰的前景元素外部渗出。 - 00-BBB
2

很不幸，我尝试了所有建议的解决方法，但都没有起作用。唯一有效的方法是将SVG内联放置，而不是作为img标签。

令人惊讶的是，这个问题似乎存在了很长时间！

1
你应该尝试明确设置筛选器的"filterRes"属性，使其与Retina显示器匹配。
是的，我在另一个类似问题的答案中看到你建议使用400的值。我刚刚尝试了那个值，还尝试了更高的值，但是恐怕没有改变任何东西。而且，整个图形都会变得像素化，不仅仅是阴影。 - Sven
“400”答案是为了减少Firefox在Windows上的带状伪影而进行的一种黑客行为 - 它是有意产生像素化效果的。您应该尝试1136 x 640以在iPhone 5上查看结果。话虽如此 - 我听说移动Safari中的SVG支持尚未完全更新以适应Retina，因此像素化是真正的错误，而不仅仅是一个错误。 - Michael Mullany
1
我有同样的问题。使用filterRes基本上使SVG分辨率/大小再次依赖，这消除了使用SVG的全部意义。这里有一个孤立的WebKit错误报告：https://bugs.webkit.org/show_bug.cgi?id=119300 - ernesto
2
filterRes已被浏览器弃用，并正在逐步淘汰，因此您不能再依赖它。此外，浏览器决定在GPU上执行的比例变换通常是基于位图的，在高比例下会出现像素化问题 - 即使您从矢量图形开始。 - Michael Mullany
1

现在是2021年，仍然有相关性。我找到了一个适合我的解决方法：您可以放大SVG，然后使用CSS变换将其缩小：

.section_logo img {
    height: 500%;
    transform-origin: top left;
    transform: scale(0.2);
}
这只是一个技巧，但有时候当浏览器的漏洞多年未被修复时，你必须这样做。这是迄今为止最简单的解决方法，我感谢你！ - fumble
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接