Firefox 和 Opera：SVG 和背景尺寸导致渲染效果不佳答案

【问题标题】：Firefox and Opera: SVG & background-size results in bad renderingFirefox 和 Opera：SVG 和背景尺寸导致渲染效果不佳
【发布时间】：2013-01-19 12:22:17
【问题描述】：

我的页面上有一些元素使用 SVG 文件作为背景图像。它在 Opera、Chrome 和 Safari 中运行良好，只有 Firefox 才能将图形真正像素化。

我已经对该主题进行了搜索，甚至还有一些类似的问题在这里：
SVG rendering badly in Firefox
Firefox not anti-aliasing scaled background svg
Firefox SVG graphics blurry

一些建议是不要使用 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。现在我将两者都设置为 200 像素，瞧，SVG 渲染得尽可能清晰 - 但现在 Opera 渲染它有点模糊/非常糟糕！此外，放大时，图形会被“截断”。所以不是按比例缩放，图形似乎在它的盒子里被放大了。有什么解决办法吗？

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

【问题讨论】：

标签： css vector svg opera vector-graphics

【解决方案1】：

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

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

【讨论】：