Firefox没有抗锯齿缩放背景svg

Question

我正在开发一种响应式设计,要求标题图形与视口的宽度一致.我已经选择了svg,认为这样可以很好地扩展.(我在完整站点测试svg支持,并用svg替换gif).在Firefox(Windows 7上的13.0)中,它不是小尺寸的抗锯齿.它偶尔看起来很好看一些尺寸,如果我修复了尺寸,但我想避免这样做.Chrome和Safari会对图像进行反锯齿处理,看起来不错.

我正在设置background-size: 100% 100%缩放到容器,我也尝试了类似的东西cover,但似乎没有任何区别.

我也试过添加image-rendering: optimizeQuality;,但这似乎没有帮助.

我在http://axminster.digital.linneydesign.com/svg/上设置了一个测试页面- 最上面一个是背景图像,下面的一个是完全相同的文件,但是在html中直接添加为img.将浏览器缩小到小尺寸,您将看到顶部像素化,但底部将保持平滑.

有关如何在不修复尺寸的情况下平滑此背景图像的任何想法？

谢谢.

Answer 1

<svg>为svg文件(sophie-conran.svg)中的外部元素指定宽度和高度为100%.

会发生的是svg图像以你给它的宽度和高度进行光栅化,即1000px x 350px,然后将该位图转换为所需的大小.如果设置宽度和高度百分比,则会以最终大小创建位图,并且没有位图缩放.

更新:

这对于Firefox 24及其他版本都没有用,但是你可以做你喜欢的事情,它总能正常工作,即没有像素化.