Sve*_*ven 5 opera svg vector vector-graphics css3
我在页面上有一些使用SVG文件作为背景图像的元素.它在Opera,Chrome和Safari中运行良好,只有Firefox才能使图形真正像素化.
我已经对该主题进行了搜索,在这里甚至有一些类似的问题:
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和voilà,SVG渲染得如此清晰 - 但现在Opera渲染它有点模糊/非常糟糕!此外,放大时,图形会"切断".因此,不是按比例缩放,而是在图标框中放大图形.那有什么问题吗？
有趣的是:作为按钮的背景图像,它呈现模糊.作为输入字段中的背景图像,它会呈现为"过于清晰",我称之为"过度清晰".
请在样式表中添加以下元素类
img {
-ms-interpolation-mode: bicubic;
image-rendering: -moz-crisp-edges;
background:transparent; }