相关疑难解决方法(0)

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

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

这有时是什么样子(看看它的全貌看看差异):

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

知道怎么解决这个问题吗？

我正在开发一种响应式设计,要求标题图形与视口的宽度一致.我已经选择了svg,认为这样可以很好地扩展.(我在完整站点测试svg支持,并用svg替换gif).在Firefox(Windows 7上的13.0)中,它不是小尺寸的抗锯齿.它偶尔看起来很好看一些尺寸,如果我修复了尺寸,但我想避免这样做.Chrome和Safari会对图像进行反锯齿处理,看起来不错.

我正在设置background-size: 100% 100%缩放到容器,我也尝试了类似的东西cover,但似乎没有任何区别.

我也试过添加image-rendering: optimizeQuality;,但这似乎没有帮助.

我在http://axminster.digital.linneydesign.com/svg/上设置了一个测试页面- 最上面一个是背景图像,下面的一个是完全相同的文件,但是在html中直接添加为img.将浏览器缩小到小尺寸,您将看到顶部像素化,但底部将保持平滑.

有关如何在不修复尺寸的情况下平滑此背景图像的任何想法？

谢谢.

我正在研究带有滑动旋转木马<li>的信息图,但SVG在Firefox中显示像素化,即使FF中的SVG错误已经解决,我想.任何人都可以看到修复此问题？

网址:http://weaver-wp.weavertest.com/radiation-infographic/