HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

大佬总结

以上是大佬教程为你收集整理的html5 – Firefox SVG图形模糊全部内容,希望文章能够帮你解决html5 – Firefox SVG图形模糊所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。