我正在使用一个内嵌在标签中的SVG文件中的投影滤镜。在我的MacBook上,在Safari浏览器中看起来很好。然而,在移动版Safari中,图形变得非常有锯齿和失去了锐度。当未应用该滤镜时,SVG呈现良好。除了放弃使用该过滤器外,是否有其他方法可以修复这个问题?
我正在使用一个内嵌在标签中的SVG文件中的投影滤镜。在我的MacBook上,在Safari浏览器中看起来很好。然而,在移动版Safari中,图形变得非常有锯齿和失去了锐度。当未应用该滤镜时,SVG呈现良好。除了放弃使用该过滤器外,是否有其他方法可以修复这个问题?
这个问题在2018年仍然存在,但我已经找到了解决方案。您可以复制给过滤器的元素,在实际元素下面放置它,并仅对其保留过滤器,而不对元素进行任何过滤器处理。这样,Safari和其他浏览器只会在调整大小时光栅化带有阴影的元素,然而,这些元素将被看起来锐利的矢量元素隐藏。您可以在此处查看示例并了解更多信息。
很不幸,我尝试了所有建议的解决方法,但都没有起作用。唯一有效的方法是将SVG内联放置,而不是作为img标签。
令人惊讶的是,这个问题似乎存在了很长时间!
现在是2021年,仍然有相关性。我找到了一个适合我的解决方法:您可以放大SVG,然后使用CSS变换将其缩小:
.section_logo img {
height: 500%;
transform-origin: top left;
transform: scale(0.2);
}