html显示svg图片,HTML5/CSS3系列教程:使用SVG图片
在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG。
SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信你对这种适量格式的图片并不陌生!
为什么使用SVG?
文件非常小
能够无损失的缩放尺寸
在Retina显示屏上效果超棒
能够控制图片样式设计,例如互动和过滤filter
浏览器支持
IE8及其更低版本不支持
Android 2.3及其更低版本不支持
其它浏览器都支持
如果你需要支持这些版本的浏览器的话,你可以使用Modernizr,如下:
if (!Modernizr.svg) {
$(“.gblogo img”).attr(“src”, “images/logo.png”);
}
或者使用如下更简单的代码:
SVG文件作为一般图片使用
你可以作为图片来直接使用,如下:
你可以像控制JPG或者PNG格式文件一样,控制图片的大小,如下:
在线调试:http://www.gbtags.com/gb/debug/77d50934-592b-4b8a-b591-e7068c7e38ef.htm
SVG文件作为背景图片使用
我们也可以使用SVG图片作为背景图片使用,如下:
gbtags.com
CSS:
.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 100px;
background: url(gblogo.svg);
background-size: 100px 82px;
}
使用行内SVG
你可以直接将SVG代码拷贝到body中,将会看到图片,如下:
使用CSS控制SVG
你可以使用CSS来控制SVG文件,下面代码将控制鼠标悬浮时的图片背景颜色:
fill=“#000000” stroke=“none”>
以上代码定义了一个logo的class,然后我们可以在CSS定义如下:
.logo:hover{
fill: #F08000;
....
}
注意SVG中我们使用fill而不是background来定义背景色。
甚至可以使用filter来控制模糊度,如下:
.logo:hover{
fill: #F08000;
filter: url(#logoFilter);
}
当你使用鼠标hover图片时,会有如下效果。
SVG相关工具
总结
SVG是一个非常强大的图片格式,可以帮助你高效的处理图片,拥有比JPG或者PNG更灵活强大的图形展示方式,相信如果加以时日,必定成为最流行的图片处理方式!
html显示svg图片,HTML5/CSS3系列教程:使用SVG图片相关推荐
- HTML5/CSS3系列教程:使用SVG图片
为什么80%的码农都做不了架构师?>>> 日期:2013-3-25 来源:GBin1.com 在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG. ...
- HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性
日期:2013-2-4 来源:GBin1.com 不管你以前在web页面布局中如何称呼它们 - "区域"还是"块",我们一直都在布局中将页面分成可视的不同区域 ...
- html5触摸指定区域,HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性
日期:2013-2-4 不管你以前在web页面布局中如何称呼它们 - "区域"还是"块",我们一直都在布局中将页面分成可视的不同区域.但真正的问题在于我们并没有 ...
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
- WebRTC实时通信系列教程9 数据通道图片传输
[转载请注明出处: http://blog.csdn.net/leytton/article/details/76838194] PS:如果本文对您有帮助,请点个赞让我知道哦~ <WebRTC ...
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
最新文章
- Win 10 安装detectron2 详细手册
- 节流函数(throttle)的原理
- python知识:如何多窗口切换
- Bound Services
- Elasticsearch集群知识笔记
- java 字符串指定编码输出_java对字符的编码处理
- php ztree异步加载数据格式,zTree异步加载简单demo
- (转)美国证监会SEC发布调查报告,认定ICO为证券投资邀约
- AD15怎么导入图片做丝印 或者做 LOGO
- 游戏关卡设计理论普及
- 在定语从句中which和that用法有什么区别
- 存储器管理的内存连续分配方式详解
- 解决System进程占用80端口,关闭IIS服务
- 利用在线技术更改图片清晰度
- 绘制附带 AHT20 温湿度传感器的 stm32 电路原理图
- 湖南大学ACM程序设计新生杯大赛(同步赛)L-Liao Han【打表规律+二分】
- 2023在家赚钱怎么做,有什么适合在家做的副业项目
- 自动化功能测试-Athrun—IOS学习之旅文档
- Vue详解+实战分析
- Carsim学习心得
热门文章
- 第2关:比较、掩码和布尔逻辑
- 跟开涛学SpringMVC...
- 最新表情包小程序+前后端去授权版/最火表情包小程序源码
- 提高数据分析思维能力的三大方法
- python多线程爬取m3u8视频(包含AES解密)
- fx3u4ad一adp说明书_FX3U-4AD-PT-ADP用户手册FX3U-4AD-PT-ADP使用说明书 - 三菱
- 自定义Teams会议录像提示
- Fatal error: The slave I/O thread stops because master and slave have equal MySQL server UUIDs;
- websphere负载均衡_使用WebSphere DataPower Appliances保护JSON有效负载
- 用Burg法估计AR模型的参数原理详解及matlab实现