Firefox SVG圖形模糊

我有一個響應式網頁設計，它帶有一個SVG標誌/圖像，它的容器是動態的。所有主流瀏覽器似乎都支持SVG。Firefox SVG圖形模糊

我的SVG是動態的，所以如果我擴大我的瀏覽器窗口，SVG也會這樣做。在Chrome和IE9中，它就像一個魅力。在Firefox中，SVG在某些尺寸上很模糊。但是當它超過SVG的初始尺寸時，我不能說它一直很模糊。在我擴大瀏覽器窗口的同時，似乎並不是所有時間都正確地放棄。

那是什麼樣子，有時（看看它在fullsize看出差別）： enter image description here

也許我使用錯誤的方法將其嵌入。這就是我的CSS和HTML的樣子：

<div id="logo"></div>

CSS：

#logo { 
    background-image: url('http://dl.dropbox.com/u/569168/jess.svg'); 
    height: 22em; 
    background-repeat: no-repeat; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
}

搶在CSS中鏈接SVG，如果你想看看它。它是用Adobe Illustrator製作的。

任何想法如何解決這個問題？

來源

2012-01-21 René Stalder

更新2013-10：成熟固定在V24現在把它做成的釋放通道

更新2013年7月：Bug is solved!修復將使到Firefox 24將被釋放的地方九月和十月

之間我讀到一個有點簡單的解決這個問題的地方，我現在在我的項目中使用（將添加源當我再次找到它時）：

只需將svg-container的寬度和高度設置爲圖像可能具有的最大值，並且您很好。在當前所有的瀏覽器中都能正常工作。唯一的限制是，Firefox和Opera（是的，造成這個爛攤子兩個相同的瀏覽器）不具有非常大的圖像都很好 - >不使用過高值尺寸

原始文件：

<svg width="64px" height="128px">

讓說的最大信號寬度爲3倍那麼大，那麼你應該SVG包含此：

<svg width="192px" height="384px">

（是的，svg節點可以有更多的屬性...）

爲什麼這個工程的原因是，Opera和FF，因爲它被認爲與矢量GFX做

UPDATE調整其大小，而不是倒過來之前渲染SVGs：學分去大衛·布舍爾誰在Resolution Independence With SVG寫了一個完美的事情，文章。

來源

2012-07-02 16:03:35

似乎在'100％'處設置'width'和'height'屬性也可以解決問題。 –

是的，這可以提供幫助，但是在我的測試中失敗了性能，導致FF使用比正常情況更多的CPU。此外：瀏覽器將不再知道文件的正確高寬比 –

+1，因爲將SVG的尺寸設置爲可能解決的最大尺寸是我遇到的模糊問題。我注意到這只是SVG精靈的一個主要問題。如果SVG與徽標類似，則可以刪除「width」和「height」屬性，並且不要設置「background-size」或將其設置爲「覆蓋」 - SVG將是節點的大小，並且在Firefox或Safari中似乎並不模糊 –

問題是，當您使用SVG作爲背景圖片時，Firefox會選擇渲染矢量的大小，然後根據需要縮放這些基於圖像的像素。這裏有一個相關的錯誤：https://bugzilla.mozilla.org/show_bug.cgi?id=600207

最簡單的解決這裏不使用SVG作爲背景圖像，而是直接嵌入SVG的，或通過<img>標籤引用它。

如果你提出了一個工作測試案例來顯示問題和文件，那麼我們可以幫助你實際的代碼和修復。

來源

2012-01-21 18:54:57 Phrogz

我遇到了完全相同的問題，我自己。我可以通過在文本編輯器中編輯SVG並將<svg>元素的寬度屬性值更改爲100％，但保留所有其他屬性值，從而在Firefox中修復它。在您的具體的例子，這裏要做出的改變：

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px" 
    y="0px" 
    width="100%" 
    height="189px" 
    viewBox="0 0 347 189" 
    enable-background="new 0 0 347 189" 
    xml:space="preserve">

這奏效了，我和應該爲你做同樣的;不過，如果沒有測試用例，我不能100％地工作。

注意：將寬度爲和的高度設置爲100％會破壞Safari在我的特殊情況下渲染SVG。確保只將寬度設置爲100％。

來源

2012-05-07 09:15:21

爲了使SVG圖像scale to the size of its container，請確保您的SVG標籤具有viewBox集：

<svg viewBox="0 0 347 189">

但沒有width或height屬性，即不：

<svg width="347px" height="189px" viewBox="0 0 347 189">

此，默認情況下，將通過按比例擴大到適合的最大寬度或高度來保持其縱橫比，無論哪個尺寸首先遇到邊界。

您可以用各種有趣的方式更改preserveAspectRatio策略，如果該特定行爲不是您尋求的行爲。

來源

2012-12-12 07:55:09 ecmanaut

與'background-size'正常工作，而標記的答案不適用。 –

在FF36中按預期工作。 –

最簡單的解決方案是在像Illustrator這樣的矢量圖像編輯器中擴展SVG。將其縮放到瀏覽器中呈現的分辨率（或更高）。由於它是一個矢量，因此擴展它不會影響文件大小。

來源

2013-02-11 02:26:38

我發現的另一個類似的「gotcha」是當我從illustrator中導出svg的時候，寬度和高度都不是圓數 - 所以當我在編輯器中打開SVG時，寬度就像是「100.6789px」。通過在插圖中首先仔細編輯圖像以得到圓形數字，然後爲firefox使用相同的寬度和高度，它爲我解決了模糊圖像。

來源

2013-08-06 08:37:35 user1010892

Firefox SVG圖形模糊

回答

相關問題