首页 文章

Firefox SVG图形模糊

提问于
浏览 次
21

我有一个响应式网页设计与SVG徽标/图像，其容器是动态的 . 所有主流浏览器似乎都支持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制作的 .

Any idea how to fix that?

html5 firefox css3 svg

6 回答

  • 0

    Update 2013-10: Confirmed fixed in v24 现在已进入发布渠道

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

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

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

    原始档案：

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

    让我们说最大宽度将是3倍大，那么你的SVG应该包含：

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

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

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

    更新：积分给David Bushell，他写了一篇关于Resolution Independence With SVG的精彩文章 .

    回复于
  • 6

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

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

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

    回复于
  • 1

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

    回复于
  • 8

    我自己也遇到了同样的问题 . 通过在文本编辑器中编辑SVG并更改 <svg> 元素's width attribute value to 100%, but leaving all other attribute values alone. In your particular example, here' s，我能够在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％ .

    回复于
  • 15

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

    回复于
  • 0

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

    回复于

相关问题