svg兼容ie
来源:互联网 发布:西安软件新城软件公寓 编辑:程序博客网 时间:2024/06/07 17:02
本文引自:http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/
svg image标签降级技术
<svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96" /></svg>
如果浏览器支持SVG,则SVG显示;对于不支持的浏览器,例如IE8浏览器,会忽略svg
标签的存在,直接渲染image
,在其看来,这就是个img
标签,于是,图像就以svg.png
的形式显示了。
如果你使用SVG作为background-image
Modernizr有一个SVG测试,可以判定设备是否支持SVG,于是,我们就可以通过在HTML元素上添加特定的类名(eg. no-svg
),做不同的样式控制
.my-element { background-image: url(image.svg);}.no-svg .my-element { background-image: url(image.png);}另一个方法
.my-element { background-image: url(fallback.png); background-image: url(image.svg), none;}其利用的技术是CSS3多背景,这是一个经验式技术,我们通过各种观察或者积累发现,浏览器只要支持了多背景,几乎无一例外支持SVG. 于是,浏览器认识
url(image.svg), none
这个多背景声明,就使用SVG,否则,降级使用上面的png
背景。如果你使用SVG作为<img>
Scott Jehl喜欢这么做:
<img src="image.svg" onerror="this.src=image.png">
HTML混杂行为,如果你是个具有分离癖好的人,上面的方法可能会让你揪心,你可以直接Modernizr的JS API,在脚本中判断处理,类似下面:
if (!Modernizr.svg) { $("img[src$='.svg']").attr("src", fallback);}
如果上面代码中的fallback
是个URL字符串,你可以把这个字符串放在data-fallback
中,然后,你就可以根据你的实际需要,例如,根据后缀做智能判断加载等。
阅读全文
0 0
- svg兼容ie
- SVG文字缩放(文字多的时候不兼容火狐和IE)
- ie 兼容
- IE兼容
- IE兼容
- IE兼容
- IE兼容
- IE兼容
- IE兼容
- 兼容IE
- ie兼容
- IE兼容
- ie兼容
- ie 兼容,win8兼容
- IE对SVG支持不好
- IE对SVG的支持
- 关于FF、IE兼容
- IE和FF兼容
- java攻城狮之路-面向对象(2)
- JS原生实现多个小球跟着鼠标移动
- jq放大镜
- Linux基础命令总结(CentOS6.9, CentOS7.3)
- MVC、MVP、MVVM之间的关系
- svg兼容ie
- 2017 四川省赛 A.Simple Arithmetic【溢出】
- Spark--03基本架构及原理
- 限制一个段落的字数(项目总结)
- 异常
- Install vlc in Fedora 26
- Ajax总结篇
- 1204: 剔除相关数
- Python 语言下的机器学习库