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图形模糊

回答

相关问题