Firefox SVG图形模糊

Question

我有一个响应式网页设计，带有SVG徽标/图像，其容器是动态的。所有主流浏览器似乎都支持SVG非常好。

我的SVG是动态的，所以如果我扩展浏览器窗口，SVG也会这样做。在Chrome和IE9中，它就像一个魅力。在Firefox中，SVG在某些尺寸上很模糊。但是当它超过最初的SVG大小时，我不能说它一直模糊。在我扩大浏览器窗口的时候，似乎并没有正确地重新渲染。

有时它看起来像是这样（在fullsize中查看它以查看差异）：

也许我用错误的方法来嵌入它。这就是我的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制作的。

知道如何解决这个问题吗？

Answer 1

更新2013-10：已确认已在v24中修复，现已进入发布渠道

---

更新2013-07：Bug is solved! 修复将进入Firefox 24，将在9月到10月之间的某个地方发布

---

我在某个地方读到了一个关于这个问题的简单解决方案，我现在在我的项目中使用（当我再次找到它时会添加源代码）：

只需将svg-container的宽度和高度设置为图像可能具有的最大值，就可以了。适用于所有当前浏览器就好了。唯一的限制是，firefox和opera（是的，导致这个混乱的两个浏览器相同）不适用于非常大的图像 - ＆gt;不要使用太高的维度值

原始档案：

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

假设最大宽度是3倍，那么你的SVG应该包含这个：

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

（是的，svg节点可以有更多属性......）

这样做的原因是Opera和FF在调整大小之前渲染SVG而不是反过来，因为它应该用vector gfx完成

更新：积分给David Bushell，他在Resolution Independence With SVG上写了一篇精彩的文章。

Answer 2

问题在于，当您使用SVG作为背景图像时，Firefox会选择渲染矢量的大小，然后根据需要调整这些基于图像的像素。这是一个相关的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=600207

这里最简单的解决方法是不使用SVG作为背景图像，而是直接嵌入SVG，或通过<img>标记引用它。

如果您提出了一个显示问题和文件的工作测试用例，那么我们可以帮助您解决实际的代码和修复问题。

Answer 3

要制作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策略。

Answer 4

我自己遇到了完全相同的问题。通过在文本编辑器中编辑SVG并将<svg>元素的width属性值更改为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％。

Answer 5

最简单的解决方案是在像Illustrator这样的矢量图像编辑器中扩展SVG。将其缩放到浏览器（或更高版本）中的渲染分辨率。由于它是矢量，因此将其放大不会影响文件大小。

Answer 6

我发现的另一个类似的“问题”是当我从插图画家导出svg时宽度和高度不是圆数 - 所以当我在编辑器中打开SVG时，宽度就像“100.6789px”。通过仔细编辑插图画中的图像，首先是圆形数字，然后使用相同的宽度和高度为firefox，它为我解决了模糊图像。