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

回答

相關問題