svg.js教程及使用手册详解（二）
上篇简要介绍了svg.js的基本信息和基本用法，这篇开始详细讲解svg.js的用法。
SVG元素
SVG元素主要包括各种形状、线条、文本、路径。
矩形——Rect
Rects有两个参数，即矩形的宽度和高度：
var rect = draw.rect(100, 100)椭圆——Ellipse
Ellipses就像矩形一样，有两个参数，横向和纵向的直径：
var ellipse = draw.ellipse(200, 100)圆——Circle
Circles有一个参数，即圆的直径：
var circle = draw.circle(100)倘若画椭圆的时候，设置其两个参数相同，那么实际上画出的图形和相同直径的圆是一样的。
直线——Line
四个参数，分别是直线起点和终点的x、y坐标：
var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })折线——Polyline
由三个或三个以上的点组成折线，也可以认为是不闭合的多边形。所以其参数就是折线顶点的坐标：
var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })其中用空格分开的每一对坐标x1,y1表示一个顶点的坐标，所以使用以下的这种集合的方式来表示点的坐标也是可以的：
var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 })多边形——Polygon
polyline画出的是折线，是不闭合的多边形，Polygon则相对的画出的是闭合的多边形。其参数是闭合多边形的顶点的坐标：
var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })二者的区别仅仅在于，起点和终点是否连接。
路径——Path
var path = draw.path('M10,20L30,40')实际上svg.js中Path的使用方法跟SVG的Path的使用方法是一样的。具体如下：
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置 L = lineto(L X,Y) ：画直线到指定的坐标位置 H = horizontal lineto(H X)：画水平线到指定的X坐标位置 V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY) Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线 T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 Z = closepath()：关闭路径
图片——Image
当需要在SVG画布上放置图片时，可以使用以下函数：
var image = draw.image('/path/to/image.jpg', 200, 200).move(100, 100)其中第一个参数是图片路径，后两个参数分别表示图片的宽度和高度。
文本——Text
第一种是最简单的创建文本的方式：
var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")以上代码会自动创建一个文本块，并在必要时插入换行。
第二种方式相对复杂，也增加了更多控制：
var text = draw.text(function(add) {
add.tspan('Lorem ipsum dolor sit amet ').newLine()
add.tspan('consectetur').fill('#f06')
add.tspan('.')
add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
add.tspan('Nunc ultrices lectus at erat').newLine()
add.tspan('dictum pharetra elementum ante').newLine()
})要获取text文本的内容：
text.content要修改text文本的内容：
text.text('Brilliant!')还有如下这种使用起来更自然的方式：
text.font({
family: 'Helvetica'
, size: 144
, anchor: 'middle'
, leading: '1.5em'
})文本路径——TextPath
var text = draw.text(function(add) {
add.tspan('We go ')
add.tspan('up').fill('#f09').dy(-40)
add.tspan(', then we go down, then up again').dy(40)
})
text.path('M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100').font({ size: 42.5, family: 'Verdana' })以上代码在执行时，将沿着给定的路径绘制文本。
继承——Use
var rect = draw.rect(100, 100).fill('#f09')
var use = draw.use(rect).move(200, 200)如上代码所示，在SVG画布上将会出现两个rect，原始的rect和use的实例，任何在原始rect上所做的修改都将会在use的实例上显现。
如果我不想让原始的rect出现怎么办呢？
var rect = draw.defs().rect(100, 100).fill('#f09')
var use = draw.use(rect).move(200, 200)如上，可以使用defs()方法，由此也拓展出一个更易于重用的SVG组件。可以将原始的rect当作一个库元素，可以通过use方法来进行重用而不会修改原始元素。
下一篇将持续更新svg.js中引用元素的方法，也即控制画布上的元素进行动画操作的方法，敬请期待！
原文链接：http://www.jinlongtalk.com/2017/02/21/svg-js2/