css - Firefox 不抗锯齿缩放背景 svg

Question

我正在做一个响应式设计，它要求标题图形随视口(viewport)的宽度缩放。我已经去了一个 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/ 设置了一个测试页面- 最上面的是背景图片，下面的是完全相同的文件，只是作为 img 直接添加到 html 中。将浏览器缩小到较小的尺寸，您会看到顶部像素化，但底部会保持平滑。

关于如何在不固定其尺寸的情况下平滑此背景图像有什么想法吗？

谢谢。

Answer 1

给外<svg> svg 文件 (sophie-conran.svg) 中的元素宽度和高度均为 100%。

发生的事情是 svg 图像在您给它的宽度和高度上被栅格化，即 1000px x 350px，然后该位图被转换为所需的大小。如果您设置宽度和高度百分比，则将以最终大小创建位图，并且不会缩放位图。

更新:

不过，这对于 Firefox 24 及更高版本来说都没有实际意义，您可以随心所欲，它始终可以正常工作，即没有像素化。