5

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

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

一些建议是不要过度使用 SVGbackground-size并提供它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 渲染它有点模糊/非常糟糕！此外，放大时，图形会被“截断”。所以不是按比例缩放，图形似乎在它的盒子里被放大了。有什么解决办法吗？

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

4

1 回答 1

1

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

img {
-ms-interpolation-mode: bicubic;
image-rendering: -moz-crisp-edges;
background:transparent; }
于 2013-11-14T07:28:23.457 回答