Svg.js实例教程及使用手册详解（一）
什么是SVG？
SVG指可伸缩矢量图形(ScalableVectorGraphics)
SVG用来定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG是万维网联盟的标准
SVG与诸如DOM和XSL之类的W3C标准是一个整体
简介：
SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。
SVG（ScalableVectorGraphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。
SVG.js中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。
SVG.js中的一些亮点：
•易读的简洁的语法
•非常轻量，gzip压缩版只有5k
•针对大小、位置、颜色等的动画元素
•模块化结构，轻松扩展
•各种实用插件
•各种形状类型间拥有统一的API.
•元素可以绑定事件，包括触摸事件
•完全支持不透明蒙版
•元素组
•动态渐变
•填充模式
•完整的文档记录
使用说明：
创建一个SVG文档
使用SVG()函数来在一个给定的html元素中创建一个SVG文档：
vardraw=SVG('canvas').size(300,300)
varrect=draw.rect(100,100).attr({fill:'#f06'})
其中SVG()中的参数可以使一个元素的id或者元素本身。
以上两句将在html文档中产生以下代码：
<divid="canvas"> <svgxmlns="http://www.w3.org/2000/svg"version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink"width="300"height="300"> <rectwidth="100"height="100"fill="#f06"></rect> </svg> </div>
当然，要定义SVG画布的大小，除了使用像素之外，也可以使用百分比的。如下：
vardraw=SVG('canvas').size('100%','100%')
检测浏览器对SVG的支持度
在使用svg.js之前，可以先用以下的代码来检测浏览器对svg.js这个库的支持情况：
if(SVG.supported){
vardraw=SVG('canvas')
varrect=draw.rect(100,100)}
else{
alert('SVGnotsupported')}
ViewBox
<svg>的属性可以用viewbox()方法来确定，viewbox()方法就像是一个setter函数一样，如下所示：
draw.viewbox(0,0,297,210)
上面的一行代码和下面的一行代码是等价的，前两个参数表示<svg>的位置，后两个是其宽度和高度。
draw.viewbox({x:0,y:0,width:297,height:210})
如果没有任何参数，那么viewbox就直接返回一个空的<svg>：
varbox=draw.viewbox()
viewbox()方法可以有zoom属性，
varbox=draw.viewbox()varzoom=box.zoom
如果viewbox中的<svg>的大小和实际的SVG画布的大小相同，那么zoom的值就是1.
SVG文档
svg.js也可以在htmlDOM外工作，如下所示，是一个独立的svg文件，就像是外部的js文件一样。
<?xmlversion="1.0"encoding="utf-8"?>
<svgid="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1">
<scripttype="text/javascript"xlink:href="svg.min.js">
</script>
<scripttype="text/javascript">
<![CDATA[
vardraw=SVG('viewport')
draw.rect(100,100).animate().fill('#f03').move(100,100)
]]>
</script>
</svg>
以上所述是小编给大家介绍的Svg.js实例教程及使用手册详解（一）的内容，下面将持续更新svg.js的其他方法的用法，敬请关注！