HTML5中SVG的深入分析

SVG是可伸缩矢量图形的缩写，它意味着可扩展的矢量图形。1998，万维网联盟成立了一个工作组，开发一种通过XML - SVG来表示矢量图形的技术！因为SVG也是一个XML文件，SVG也继承了XML的开放性、可移植性和交互性的优点。本文介绍了HTML5中的SVG，需要朋友们参考。
SVG的背景

SVG是可缩放矢量图形的缩写，这意味着可缩放矢量图形。1998，万维网联盟成立工作组开发的技术——通过XML表达mdash；SVG矢量图形！因为SVG也是一个XML文件，SVG也继承了XML的开放性、可移植性和交互性的优点。现在几乎所有主流浏览器都支持SVG，您可以从这里获得更多信息，包括：

使用或元素来显示基本的SVG图形；
用于显示SVG图形；
SVG图形被应用到CSS背景图中。
直接在HTML文档中使用标签（需要HTML5支持）；
使用CSS或外部对象元素的HTML元素使用SVG转换、过滤器和其他特殊效果。
PS图象处理软件喜欢在SVG对象的使用效果，包括模糊和颜色处理；
使用SVG图像的动画。
使用SVG格式的字体；

* SVG
*基本内容
* SVG不属于HTML5专有内容
* HTML5提供了关于SVG本地的内容
*在HTML5出现之前，有一个SVG内容
* SVG，简单地说，它是一个向量图。
* SVG文件的扩展名是.
* SVG使用XML语法
*概念
* SVG是一种使用XML技术来描述二维图形的语言。
* SVG的特性
* SVG绘图图形可以被搜索引擎捕获。
*在图片质量不下降的情况下，SVG被放大了。
* SVG与画布的区别
* SVG
*不依赖决议
*支持事件绑定
*大渲染区域的程序（如百度地图）
*不能用于实现Web游戏
*帆布
*依赖解析
*不支持事件绑定
*最适合的网络游戏
*保存为jpg格式
*使用
*网页中的一些小图标
*网页上的动态特效（动画效果）
*在HTML5中使用SVG
*元素的使用
*效果-类似于元素
*默认大小为300px * 150px
*使用CSS样式
*使用SVG绘制一个图形，它必须在元素中定义。
*绘制图形
*矩形单元

复制代码代码如下所示：

SVG绘制矩形
<！——
在HTML页面中使用SVG标记
*定义元素
*类似于元素的作用
*默认大小300px * 150px
*设置宽度和高度-属性和样式
*用SVG绘制所有图形，必须在元素中定义
*用SVG绘制的图形与HTML页面相关
-->

<！——
画一个矩形—
* x和y -绘制矩形左上角的坐标。
*宽度和高度-绘制矩形的宽度和高度
*必须使用属性模式，不能使用样式样式。
*默认颜色是黑色。
设置颜色-可以使用两个属性，也可以使用样式。
*填充-设置填充颜色
*行程-颜色设置
设置线宽
*笔画宽度
小心
* SVG绘制图形，使用样式设置样式，不使用CSS属性，而是使用SVG属性。
-->
*圆形元素
<！——
画一个圆—
* CX和CY圆圆坐标值
* R -圆半径
-->
*椭圆元

*线性元件
<！——
元素只能包含一个图形元素或若干图形元素。
*可以包含多个图形元素
-->
*折线元素
<！——
单元折线
*点-设置起点，折叠点和终点。
*使用
＊多点之间的空间分隔
折叠线的特点
*默认是折叠线（结束点的起始点）中的区域，默认提供黑色。
-->
*多边形元素

*特效元素
*渐变梯度元素在元素中定义。
*线性梯度—
*这个元素是起始元素。
<！——
设置线型—
*用法-定义元素中的渐变
*特征-与基准线
*起点坐标x1，y1
*终点坐标X2，Y2
*注
*这个元素是起始元素。

* X1和Y1、X2值，和Y2都100点
*定义id属性
*用于向绘图元素添加一组渐变。
*使用元素设置渐变的颜色。
*偏移-设置渐变颜色的位置
*值也为一百点。
*停止设置渐变颜色
*不透明度-设置渐变颜色的透明度
-->

<！——
如何设置上面的线性渐变，并将其添加到下面的矩形中
*使用填充属性值为URL（#梯度元素的ID值）
-->
*扇区（瑞）梯度—
*过滤高斯模糊
*使用元素的过滤器
*元素-高斯模糊
* =sourcegraphic
* stddeviation集的模糊度
复制代码代码如下所示：
<！——
如何建立高斯模糊滤波器
*定义元素过滤器在元素中定义。
*定义元素——表示SVG的筛选器
＊高斯模糊元素的定义
* attribute
* =sourcegraphic固定的写作
* stddeviation集的模糊度
*定义元素的id属性值
*在元素中的元素的绘图中容易添加
-->
<！——
如何将上面的高斯模糊与下面的元素联系起来
*使用过滤器的属性，价值是URL（# ID）
*设置当前图形的筛选器
-->
*在元素中定义的注释
* TWO.js
*基本内容
* JS图书馆介绍
*阅读Three js -专门用于绘制三维图形
* two.js -专门用于绘制二维图形
*支持的格式two.js
* SVG -默认值
*帆布
* WebGL -专门用来绘制图像
*如何使用two.js
*在HTML页面中引入two.js文件
*在html页面中定义容器（）
*在Javaｓｃｒｉｐｔ代码中
*在html页面中获取容器
*创建两个对象并将对象添加到容器中
新的二（params）。AppendTo（元）；
*利用two.js提供的API方法
*使用所提供的two.js设置图形的方法
*使用更新（）方法
*创建两个对象
*构造函数-新两（参数）
* params参数设置当前对象的信息
*类型-设置当前使用的格式（两种类型。SVG）
* SVG -默认值
*帆布
* WebGL
*宽度和高度-设置宽度和高度
*全屏设置全屏
*布尔值，true代表全屏
*图形的方法
*定比线（）-画线
* makerectangle（）画一个矩形
* makecircle（）画一个圆
* makeellipse（）绘制椭圆
*动画方法
*更新（）-更新动画
*播放（）-添加动画（循环）
*暂停（）-删除动画
*设置绘图图形的样式
*绘制调用两个对象的绘图方法时返回图形对象。
*通过图形对象设置相关的属性值
*包操作
*两组。
*动画效果
*绑定（事件，回调）方法-事件绑定
*事件绑定事件名
*更新-相应更新（）方法的作用
*所有DOM事件都可以绑定。
*回调事件处理功能
*扩展内容
*前端开发工具
* Aptana Studio 3代码提示
* Webstrom -国内前端开发者神器
*在实际发展中
*多用SVG
*不失真
*可以搜索
*页面优化-减少外部链接
*
*
*画布- HTML绘图图形
*在实际操作中，它出现在图片（PNG）中。
*不能被搜索引擎捕获
*失真后的放大
* SVG内容
*内部容量非常大。
*静态图
*动态动画效果
*特别提供活动
*几乎没有关于SVG在线的信息（没有书籍）
* SVG规范（W3C英语）
*在HTML页面中定义SVG或画布
*它只是一个元素的定义还是一些元素的定义
*可以在html页面上定义多个或多个元素。
SVG或画布都允许同时定义（绘制）多个图形。
*在实际开发中使用
* SVG在以后的工作开发中，使用率不高。
* SVG图片通常由UI设计器完成。
* SVG甚至我们自己的设计（绘图）
*网络上有许多专门提供现成SVG图片的网站。
*使用js库

为了------------------------------------------------------------------------------------ >改变生活，为了改变和创造。