我的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-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 举报,一经查实,本站将立刻删除。