Svgjs使用手册Word文件下载.docx
- 文档编号:15176836
- 上传时间:2022-10-28
- 格式:DOCX
- 页数:25
- 大小:30.55KB
Svgjs使用手册Word文件下载.docx
《Svgjs使用手册Word文件下载.docx》由会员分享,可在线阅读,更多相关《Svgjs使用手册Word文件下载.docx(25页珍藏版)》请在冰豆网上搜索。
∙动态渐变
∙填充模式
∙完整的文档记录
使用说明:
CreateaSVGdocument
Usethe
SVG()
functiontocreateaSVGdocumentwithinagivenhtmlelement:
vardraw=SVG('
canvas'
).size(300,300)
varrect=draw.rect(100,100).attr({fill:
'
#f06'
})
Thefirstargumentcaneitherbeanidoftheelementortheselectedelementitself.Thiswillgeneratethefollowingoutput:
<
divid="
canvas"
>
<
svgxmlns="
http:
//www.w3.org/2000/svg"
version="
1.1"
xmlns:
xlink="
//www.w3.org/1999/xlink"
width="
300"
height="
rectwidth="
100"
fill="
#f06"
/rect>
/svg>
/div>
Bydefaultthesvgcanvasfollowsthedimensionsofitsparent,inthiscase
#canvas:
).size('
100%'
'
)
CheckingforSVGsupport
Bydefaultthislibraryassumestheclient'
sbrowsersupportsSVG.Youcantestsupportasfollows:
if(SVG.supported){
vardraw=SVG('
varrect=draw.rect(100,100)
}else{
alert('
SVGnotsupported'
}
ViewBox
The
viewBox
attributeofan
svg>
elementcanbemanagedwiththe
viewbox()
method.Whensuppliedwithfourargumentsitwillactasasetter:
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
methodisthatyoucangetthezoomoftheviewbox:
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"
?
svgid="
viewport"
xmlns="
>
scripttype="
text/javascript"
xlink:
href="
svg.min.js"
/script>
!
[CDATA[
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
varellipse=draw.ellipse(200,100)
Circle
Theonlyargumentnecessaryforacircleisthediameter:
varcircle=draw.circle(100)
Notethatthisgeneratesan
ellipse>
elementinsteadofa
circle>
.Thischoicehasbeenmadetokeepthesizeofthelibrarydown.
Line
Thelineelementalwaystakesfourarguments,
x1,
y1,
x2
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:
Polylinestringsconsistofalistofpointsseparatedbyspaces:
x,yx,yx,y.
Asanalternativeanarrayofpointswillworkaswell:
//polyline([[x,y],[x,y],[x,y]])
varpolyline=draw.polyline([[0,0],[100,50],[50,100]]).fill('
Polylinescanbeupdatedusingthe
plot()
method:
polyline.plot([[0,0],[100,50],[50,100],[150,50],[200,50]])
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('
varpolygon=draw.polygon('
Polygonstringsareexactlythesameaspolylinestrings.Thereisnoneedtoclosetheshapeasthefirstandlastpointwillbeconnectedautomatically.
Path
Thepathstringissimilartothepolygonstringbutmuchmorecomplexinordertosupportcurves:
//path('
pathdata'
varpath=draw.path('
M10,20L30,40'
Formoredetailsonpathdatastrings,pleaserefertotheSVGdocumentation:
//www.w3.org/TR/SVG/paths.html#PathData
Notethatpathswillalwaysbepositionedatx=0,y=0oncreation.Thisistomaketheunified
move()
apipossible.Svg.jsassumesyouarecreatingapathtomoveitafterwards.Ifyouneedtoconstantl
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Svgjs 使用手册