Firefox 没有抗锯齿缩放背景 svg

Posted 2023-03-06

【中文标题】Firefox 没有抗锯齿缩放背景 svg

【英文标题】：Firefox not anti-aliasing scaled background svg

【发布时间】：2012-08-06 11:12:51

【问题描述】：

我正在开发一种响应式设计，该设计需要标题图形随视口宽度缩放。我已经去了一个 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 中。将浏览器缩小到小尺寸，您会看到顶部的像素化，但底部的像素会保持平滑。

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

谢谢。

【参考方案1】：

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

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

更新：

这在 Firefox 24 及更高版本中没有任何意义，你可以做你喜欢做的事，它总是能正常工作，即没有像素化。

【讨论】：

完美，非常感谢。感谢您的解释，而不仅仅是解决方案。

虽然这确实解决了我在 Firefox 中的问题，但它在 ios 5 和普通的 android 浏览器（不是 Android 上的新 Chrome 浏览器）中引起了一个新问题。一张图像的比例约为 3:1。当高度/宽度作为精确数量给出并且背景尺寸用于缩放它时，它会很好地呈现。当我使用 100% 时，它会在图像上方和下方呈现大量空白。

【参考方案2】：

解决方案是将 SVG 作为标签，而不是作为外部文件。 Firefox 将正确应用抗锯齿。