今天小编跟大家讲解下有关深入浅析HTML5中的SVG ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关深入浅析HTML5中的SVG 的相关资料，希望小伙伴们看了有所帮助。
SVG 背景
SVG是Scalable Vector Graphics的缩写 意为可缩放矢量图形。1998年 万维网联盟成立了一个工作组 研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件 所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG 大家可以从 这里 得到更多的兼容信息 其中包括：
使用<embed>或者<object>元素来显示基本的SVG图形；使用<img>来显示SVG图形；将SVG图形应用为CSS背景图；直接在HTML文档中使用<svg>标签（需要HTML5支持）；对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效；对SVG对象使用类似photoshop的效果 包括模糊和色彩处理；对SVG图像使用动画；使用SVG格式的字体；
* SVG* 基本内容* SVG并不属于HTML5专有内容* HTML5提供有关SVG原生的内容* 在HTML5出现之前,就有SVG内容* SVG,简单来说就是矢量图* SVG文件的扩展名为".svg"* SVG使用的是XML语法* 概念* SVG是一种使用XML技术描述二维图形的语言* SVG的特点* SVG绘制图形可以被搜索引擎抓取* SVG在图片质量不下降的情况下,被放大* SVG与Canvas的区别* SVG* 不依赖分辨率* 支持事件绑定* 大型渲染区域的程序(例如百度地图)* 不能用来实现网页游戏* Canvas* 依赖分辨率* 不支持事件绑定* 最合适网页游戏* 保存为".jpg"格式的图片* 用途* 网页中一些小的图标* 网页中动态特效(动画效果)* HTML5中使用SVG* 使用<svg></svg>元素* 作用 - 类似于<canvas>元素* 默认大小为300px*150px* 使用CSS样式* 使用SVG绘制图形,必须定义<svg>元素中* 绘制图形* 矩形元素复制代码代码如下:<rect x=""y=""width=""height=""/><!DOCTYPE html><html> <head> <title>SVG绘制矩形</title> <meta charset="utf-8"/> </head> <body> <!-- 在HTML页面中使用svg标签的话 * 定义<svg></svg>元素 * 类似于<canvas>元素的作用 * 默认大小 300px * 150px * 设置宽度和高度 - 属性和style * 利用svg绘制所有图形,必须定义在<svg>元素内 * 利用svg绘制的图形是与HTML页面有关的 --> <svg style="background:pink;width:400px;height:400px;"> <!-- 绘制矩形 - <rect /> * x和y - 绘制矩形的左上角坐标值 * width和height - 绘制矩形的宽度和高度 * 必须使用属性方式,不能使用style样式方式 * 默认颜色为黑色 设置颜色 - 既可以使用属性,还可以使用样式 * fill - 设置填充颜色 * stroke - 设置描边颜色 设置线条宽度 * stroke-width 注意 * svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性 --> <rect x="10"y="10"width="100"height="100"fill="blue"stroke="black"stroke-width="5"/> <rect x="120"y="10"width="100"height="100"style="fill:blue;stroke:black;stroke-width:5"/> </svg> </body></html>* 圆形元素<circle cx=""cy=""r=""/> <body> <svg width="500px"height="500px"> <!-- 绘制圆形 - <circle> * cx和cy - 圆形的圆形坐标值 * r - 圆形的半径 --> <circle cx="100"cy="100"r="100"fill="pink"/> </svg> </body>* 椭圆元素<ellipse cx=""cy=""rx=""ry=""> <body> <svg width="300px"height="300px"> <ellipse cx="150"cy="150"rx="150"ry="100"/> </svg> </body>* 直线元素<line x1=""y1=""x2=""y2=""/> <body> <!-- <svg>元素中只能包含一个图形元素,还是可以包含多个图形元素? * 可以包含多个图形元素 --> <svg width="300px"height="300px"> <line x1="10"y1="10"x2="200"y2="200"stroke-width="10"stroke="black"/> <line x1="200"y1="200"x2="200"y2="10"stroke-width="10"stroke="black"/> </svg> </body>* 折线元素<polyline points=""><body> <svg width="500px"height="500px"> <!-- <polyline>元素 - 折线 * points - 设置起点、折点及终点 * x和y之间使用","分隔 * 多个点之间使用空格分隔 折线的特点 * 默认将折线中的区域(起点到终点),默认提供黑色 --> <polyline points="10,10 200,10 200,200 10,200 10,10"stroke-width="5"stroke="black"fill="white"/> </svg> </body>* 多边形元素<polygon points=""/> <body> <svg width="500px"height="500px"> <polyline points="10,10 200,10 200,200 10,200 100,100 10,10"stroke-width="5"stroke="black"fill="white"/> </svg> </body>* 特效元素* 渐变 - 渐变元素定义在<defs>元素内* 线型渐变 - <linearGradient>* 该元素是起始元素<linearGradient x1="%"y1="%"x2="%"y2="%"><stop offset="%"stop-color="color"/></linearGradient> <body> <svg width="400px"height="400px"> <!-- 设置线型渐变 - <linearGradient> * 用法 - 将渐变定义在<defs>元素中 * 特点 - 具有基准线 * 起点坐标值 - x1和y1 * 终点坐标值 - x2和y2 * 注意 * 该元素是起始元素 <linearGradient></linearGradient> * x1和y1、x2和y2的值都是百分值 * 定义id属性 * 用于将设置的渐变添加到绘制的图形元素中 * 使用<stop>元素 - 设置渐变的颜色 * offset - 设置渐变颜色的位置 * 该值也是百分值 * stop-color - 设置渐变颜色 * stop-opacity - 设置渐变颜色的透明度 --> <defs> <linearGradient id="mygrd"x1="0"y1="0"x2="100%"y2="100%"> <stop offset="0"stop-color="red"/> <stop offset="50%"stop-color="green"/> <stop offset="100%"stop-color="blue"/> </linearGradient> </defs> <!-- 如何可以将上面设置线型渐变,添加在下面的矩形中? * 使用fill属性,值为url(#渐变元素的id值) --> <rect x="0"y="0"width="400"height="400"fill="url(#mygrd)"/> </svg> </body>
* 扇形(射线)渐变 - <radialGradient>* 滤镜 - 高斯模糊* 滤镜使用<filter>元素* <feGaussianBlur>元素 - 高斯模糊* in="SourceGraphic"* stdDeviation - 设置模糊程度
复制代码代码如下: <body> <svg width="500px"height="500px"> <!-- 如何设置高斯模糊滤镜 * 定义<defs></defs>元素 - 滤镜定义在该元素中 * 定义<filter></filter>元素 - 表示SVG的滤镜 * 定义高斯模糊元素<feGaussianBlur> * 属性 * in="SourceGraphic"- 固定写法 * stdDeviation - 设置模糊程度 * 为<filter>元素定义id属性值 * 方便添加在绘制图形的元素中 --> <defs> <filter id="myfilter"> <feGaussianBlur in="SourceGraphic"stdDeviation=5 /> </filter> </defs> <!-- 如何将上面的高斯模糊与下面的元素进行关联 * 使用filter属性,值为url(#id) * 设置当前图形的滤镜 --> <rect x="100"y="100"width="100"height="100"filter="url(#myfilter)"fill="green"/> </svg> </body>
* 注意 - 定义在<defs>元素中* TWO.js* 基本内容* JS库介绍* three.js - 专门用于绘制三维图形* two.js - 专门用于绘制二维图形* two.js支持的格式* SVG - 默认* Canvas* WebGL - 专门用于绘制图像* 如何使用two.js* 在HTML页面中引入two.js文件* 在HTML页面中定义容器(<div>)* 在javascript代码中* 获取HTML页面中的容器* 创建Two对象,将该对象添加到容器中new Two(params).appendTo(Element);* 使用two.js提供的API方法进行绘制* 利用two.js提供的方法,设置图形* 利用update()方法进行绘制* 创建Two对象* 构造器 - new Two(params)* params参数 - 设置当前对象的信息* type - 设置当前使用的格式(Two.Types.svg)* svg - 默认值* canvas* webgl* width和height - 设置宽度和高度* fullscreen - 设置是否全屏* Boolean值,true表示全屏* 图形方法* makeLine() - 绘制线条* makeRectangle() - 绘制矩形* makeCircle() - 绘制圆形* makeEllipse() - 绘制椭圆* 动画方法* update() - 更新动画* play() - 添加动画(循环)* pause() - 删除动画* 设置绘制图形的样式* 调用Two对象的绘制方法绘制图形时,返回该图形对象* 通过该图形对象,设置相关属性值* 分组操作* Two.Group* 动画效果* bind(event,callback)方法 - 事件绑定* event - 绑定事件名称* update - 对应update()方法的作用* 所有的DOM事件都可以绑定* callback - 事件处理函数* 扩展内容* 前端开发工具* Aptana Studio 3 - 代码提示* Webstrom - 国内前端开发人员神器* 实际开发中* 多用SVG* 不失真* 可被搜索* 页面优化 - 减少外部链接* <a href=http://www.ztc188.com/skin/7ke/image/nopic.gif <img src=http://www.ztc188.com/skin/7ke/image/nopic.gif Canvas - HTML绘制图形* 实际运行中,是以图片方式出现(.png)* 不能被搜索引擎抓取* 放大后失真* SVG内容* 内容量非常大* 静态绘制图形* 动态动画效果* 专门提供事件* 网上关于SVG的资料很少(没有书籍)* SVG的规范(W3C英文)* SVG或CANVAS在HTML页面中定义* 是只能定义一个元素,还是可以定义多个元素?* 在一个HTML页面可以定义多个<svg>或<canvas>元素* SVG还是CANVAS都是允许同时定义(绘制)多个图形* 在实际开发中的使用* SVG在将来的工作开发,使用率并不高* SVG图片一般都是由UI设计师来完成* SVG即使是我们自己来设计(绘制)* 目前网络上很多专门提供现成的SVG图片的网站* 使用JS库
------------------------------------------------------------------------------------>为了生活而改变 为了改变而创造.
来源：爱蒂网
