Firefox不反锯齿缩放背景svg

我正在开发一个响应式设计，要求标题图形与视口宽度一起缩放。我曾经想过这样做会很好。（我在完整站点测试svg支持，并用svg替换gif）。在Firefox（Windows 7上的13.0）中，它不会以小尺寸对其进行抗锯齿。它偶尔看起来不错，有些尺寸，如果我修正尺寸，但我想避免这样做。 Chrome和Safari做图像的反锯齿，它看起来很不错。Firefox不反锯齿缩放背景svg

我将background-size: 100% 100%设置为容器的缩放比例，我也试过类似cover的东西，但似乎没有区别。

我试过加入image-rendering: optimizeQuality;，但是这似乎没有帮助。

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

有关如何平滑此背景图像而不固定其尺寸的任何想法？

感谢。

来源

2012-08-09 john holt ripley

在svg文件（sophie-conran.svg）中给出外部<svg>元素的宽度和高度为100％。

会发生什么情况是，svg图像在您提供的宽度和高度处被光栅化，即1000px x 350px，然后该位图被转换为所需的大小。如果您制作宽度和高度百分比，则位图将以最终大小创建，并且不会有位图缩放。

更新：

这一切都与Firefox 24没有实际意义和超越，虽然，你可以做你喜欢什么，它总是会正常工作，即无需像素化。

来源

2012-08-09 10:41:55

完美，非常感谢。并感谢解释，而不仅仅是解决方案。 – 2012-08-09 10:55:27

虽然这确实解决了我在Firefox中遇到的问题，但它在iOS 5和股票Android浏览器（而不是Android上的新Chrome浏览器）中引发了一个新问题。一张图像的比例约为3：1。当高度/宽度以精确数量给出，并且背景大小用于缩放时，呈现效果良好。当我使用100％时，会在图像上方和下方呈现大量空白区域。 – 2013-03-11 19:26:32

Firefox不反锯齿缩放背景svg

回答

相关问题