转载 | SVG向下兼容优雅降级方法
2024-09-01 01:01:03
本文引自:http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/
1.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
的形式显示了。
2.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
背景。
3.SVG作为<img>
喜欢这么做:
<img src="data:image.svg" onerror="this.src=image.png">
HTML混杂行为,如果你是个具有分离癖好的人,上面的方法可能会让你揪心,你可以直接Modernizr的JS API,在脚本中判断处理,类似下面:
if (!Modernizr.svg) {
$("img[src$='.svg']").attr("src", fallback);
}
如果上面代码中的fallback
是个URL字符串,你可以把这个字符串放在data-fallback
中,然后,你就可以根据你的实际需要,例如,根据后缀做智能判断加载等。
最新文章
- AngularJs之九(ending......)
- 网络基础知识之————A记录和CNAME记录的区别
- Hello World程序
- Object C学习初步
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
- linux共享文件夹
- HandlerMapping 和 HandlerAdapter
- WebForm+一般处理程序+Ajax聊天
- 无法解析的外部命令gethostname
- 【代码笔记】Web-ionic 网格(Grid)
- Linux 卸载 MySQL 数据库
- Java Service Wrapper将java程序设置为服务
- 〖Android〗scp替换脚本
- Oracle和sqlserver数据类型对应
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能 [转]
- 一款由css3和jquery实现的卡面折叠式菜单
- 调用HTMLTestRunner生产的报告内容为空解决办法
- MySQL之数据库及表的修改和删除
- RocketMQ性能压测分析(转)
- java多线程通过管道流实现不同线程之间的通信
热门文章
- 获取浏览器ip地址
- kuangbin专题 专题一 简单搜索 Shuffle&#39;m Up POJ - 3087
- docker-compose一键部署redis一主二从三哨兵模式(含密码,数据持久化)
- .NET Core 3.0之深入源码理解Kestrel的集成与应用(二)
- Spring Cloud Alibaba | Nacos服务中心初探
- C++学习书籍推荐《More Exceptional C++》下载
- Cookie起源与发展
- TreeMap原理实现及常用方法
- 洛谷P2055 [ZJOI2009]假期的宿舍 题解
- 开源一个好用的nodejs访问mysql类库