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/