html5 – Firefox SVG图形模糊

我有一个反应灵敏的网页设计,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制作的。

任何想法如何解决?

解决方法

更新2013-10:在v24中确认已经进入发布渠道

更新2013-07:Bug is solved!修复将使它进入Firefox 24,将在9月和10月之间的某个地方发布

我读了关于这个问题的一个简单的解决方案,我现在在我的项目中使用(当我再次找到它将添加源):

只需将svg容器的宽度和高度设置为图像可能拥有的最大值即可。现在所有浏览器都可以正常工作。唯一的限制是,那个firefox和歌剧(是的,同样的两个浏览器造成这个混乱)不能很好地与非常大的图像 – >不要对尺寸使用太高的值

原文件:

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

让我们说最大宽度将是3倍那么大,那么你的SVG应该包含这个:

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

(是的,svg节点可以有更多的属性…)

这样做的原因是Opera和FF在调整大小之前渲染SVG,而不是以其他方式渲染SVG,因为它应该用向量gfx

更新:学分去大卫Bushell谁写了一个奇妙的文章Resolution Independence With SVG

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法