资源描述
Svgjs使用手册.docx
《Svgjs使用手册.docx》由会员分享，可在线阅读，更多相关《Svgjs使用手册.docx（25页珍藏版）》请在冰豆网上搜索。
Svgjs使用手册
Svg.js使用手册
简介：
SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。
SVG（ScalableVectorGraphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。
SVG由W3C制定，是一个开放标准。
SVG.js中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。
SVG.js中的一些亮点：
∙易读的简洁的语法
∙非常轻量，gzip压缩版只有5k
∙针对大小、位置、颜色等的动画元素
∙模块化结构，轻松扩展
∙各种实用插件
∙各种形状类型间拥有统一的API.
∙元素可以绑定事件，包括触摸事件
∙完全支持不透明蒙版
∙元素组
∙动态渐变
∙填充模式
∙完整的文档记录
使用说明：
CreateaSVGdocument
Usethe SVG（） functiontocreateaSVGdocumentwithinagivenhtmlelement:
vardraw=SVG（'canvas'）.size（300,300）
varrect=draw.rect（100,100）.attr（{fill:
'#f06'}）
Thefirstargumentcaneitherbeanidoftheelementortheselectedelementitself.Thiswillgeneratethefollowingoutput:
//www.w3.org/2000/svg"version="1.1"xmlns:
xlink="http:
//www.w3.org/1999/xlink"width="300"height="300">
Bydefaultthesvgcanvasfollowsthedimensionsofitsparent,inthiscase #canvas:
vardraw=SVG（'canvas'）.size（'100%','100%'）
CheckingforSVGsupport
Bydefaultthislibraryassumestheclient'sbrowsersupportsSVG.Youcantestsupportasfollows:
if（SVG.supported）{
vardraw=SVG（'canvas'）
varrect=draw.rect（100,100）
}else{
alert（'SVGnotsupported'）
}
ViewBox
The viewBox attributeofan
draw.viewbox（0,0,297,210）
Alternativelyyoucanalsosupplyanobjectasthefirstargument:
draw.viewbox（{x:
0,y:
0,width:
297,height:
210}）
Withoutanyargumentsaninstanceof SVG.ViewBox willbereturned:
varbox=draw.viewbox（）
Butthebestthingaboutthe viewbox（） methodisthatyoucangetthezoomoftheviewbox:
varbox=draw.viewbox（）
varzoom=box.zoom
Ifthesizeoftheviewboxequalsthesizeofthesvgcanvas,thezoomvaluewillbe1.
Nestedsvg
Withthisfeatureyoucannestsvgdocumentswithineachother.Nestedsvgdocumentshaveexactlythesamefeaturesasthemain,top-levelsvgdocument:
varnested=draw.nested（）
varrect=nested.rect（200,200）
Thisfunctionalityrequiresthenested.jsmodulewhichisincludedinthedefaultdistribution.
SVGdocument
Svg.jsalsoworksoutsideoftheHTMLDOM,insideanSVGdocumentforexample:
xmlversion="1.0"encoding="utf-8"?
>
//www.w3.org/2000/svg"xmlns:
xlink="http:
//www.w3.org/1999/xlink"version="1.1">
href="svg.min.js">
[CDATA[
vardraw=SVG（'viewport'）
draw.rect（100,100）.animate（）.fill（'#f03'）.move（100,100）
]]>
Elements
Rect
Rectshavetwoarguments,their width and height:
varrect=draw.rect（100,100）
Ellipse
Ellipses,likerects,havetwoarguments,their width and height:
varellipse=draw.ellipse（200,100）
Circle
Theonlyargumentnecessaryforacircleisthediameter:
varcircle=draw.circle（100）
Notethatthisgeneratesan elementinsteadofa .Thischoicehasbeenmadetokeepthesizeofthelibrarydown.
Line
Thelineelementalwaystakesfourarguments, x1, y1, x2 and y2:
varline=draw.line（0,0,100,150）.stroke（{width:
1}）
Polyline
Thepolylineelementdefinesasetofconnectedstraightlinesegments.Typically,polylineelementsdefineopenshapes:
//polyline（'x,yx,yx,y'）
varpolyline=draw.polyline（'0,0100,5050,100'）.fill（'none'）.stroke（{width:
1}）
Polylinestringsconsistofalistofpointsseparatedbyspaces:
x,yx,yx,y.
Asanalternativeanarrayofpointswillworkaswell:
//polyline（[[x,y],[x,y],[x,y]]）
varpolyline=draw.polyline（[[0,0],[100,50],[50,100]]）.fill（'none'）.stroke（{width:
1}）
Polylinescanbeupdatedusingthe plot（） method:
polyline.plot（[[0,0],[100,50],[50,100],[150,50],[200,50]]）
The plot（） methodcanalsobeanimated:
polyline.animate（3000）.plot（[[0,0],[100,50],[50,100],[150,50],[200,50],[250,100],[300,50],[350,50]]）
Polygon
Thepolygonelement,unlikethepolylineelement,definesaclosedshapeconsistingofasetofconnectedstraightlinesegments:
//polygon（'x,yx,yx,y'）
varpolygon=draw.polygon（'0,0100,5050,100'）.fill（'none'）.stroke（{width:
1}）
Polygonstringsareexactlythesameaspolylinestrings.Thereisnoneedtoclosetheshapeasthefirstandlastpointwillbeconnectedautomatically.
Path
Thepathstringissimilartothepolygonstringbutmuchmorecomplexinordertosupportcurves:
//path（'pathdata'）
varpath=draw.path（'M10,20L30,40'）
Formoredetailsonpathdatastrings,pleaserefertotheSVGdocumentation:
http:
//www.w3.org/TR/SVG/paths.html#PathData
Notethatpathswillalwaysbepositionedatx=0,y=0oncreation.Thisistomaketheunified move（） apipossible.Svg.jsassumesyouarecreatingapathtomoveitafterwards.Ifyouneedtoconstantl
升级会员 