Svgjs使用手册.docx

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