Firefox和Opera中，SVG和background-size导致渲染不良的结果

Question

Firefox和Opera中，SVG和background-size导致渲染不良的结果

5

我在页面上有一些元素使用SVG文件作为背景图像。在Opera、Chrome和Safari中运行良好，只有Firefox会渲染图形变得非常有锯齿感。我已经在这个主题上进行了搜索，在SO上甚至有一些类似的问题：
Firefox中SVG呈现模糊
Firefox不抗锯齿缩放背景SVG
Firefox SVG图形模糊一些建议是不要使用background-size太多地缩放SVG，并给它width="100%" height="100%"。

我只将SVG缩小了5%，所以真的不应该太多。添加width="100%" height="100%"有点修复了像素化，但与其他浏览器相比仍然非常模糊。

有帮助的是这个链接的评论：http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707 最初的宽度和高度为22px。现在我将两者都设置为200px，嗯，SVG呈现得很清晰 - 但现在Opera呈现得有点模糊/非常糟糕！此外，当缩放时，图形被“切断”。因此，图形似乎在其框中被放大而不是成比例缩放。有没有什么解决方法？

有趣的是：作为按钮的背景图像，它会呈现模糊。作为输入字段的背景图像，它呈现为“过于清晰”，我会这样说。

- Sven

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Web Designer cum Promoter · Accepted Answer

请在您的样式表中添加以下元素类。

img {
-ms-interpolation-mode: bicubic;
image-rendering: -moz-crisp-edges;
background:transparent; }