8

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

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

谢谢。

4

2 回答 2

10

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

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

更新：

不过，这对于 Firefox 24 及更高版本都没有实际意义，你可以做你喜欢做的事，它总是能正常工作，即没有像素化。

于 2012-08-09T10:41:55.460 回答
1

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

于 2019-06-20T22:34:54.960 回答