SVG.js是一款操作 SVG 和创建 SVG 动画的轻量的js库。本教程使用的 svgjs 版本是 2.7.1
开始
首先我们创建根部 svg。
var draw = SVG('drawing').size(300, 300)
这样我们在 id 为 drawing 的元素下，创建了一个指定高宽的 svg 元素（默认高宽是100%），并返回一个 svgjs 的 SVG.Doc 实例对象。根 svg 的高宽都默认设置为 100%。
下面我们创建一个位于 (10, 10) 的宽为50，高为40, 填充色为 #f06 的矩形。
draw.rect(50, 40).move(10, 10).attr({fill: '#f06'});
svgjs 提供的是一种链式写法，有很好的可读性。
Parents
本节讲的是可以包含其他元素的元素的使用方法。
SVG.Parent 指的是可以包含其他元素的类，它直接继承自 SVG.js 的最底层的 SVG.Element 类。
SVG() 方法可以创建一个根 svg 节点，并返回一个 SVG.Doc 实例。该方法需要传入的是一个 id 名。
var draw = SVG('drawing')
通过 nested() 方法，我们可以创建一个内嵌svg。
var nested = draw.nested()
创建一个 g 元素:
var group = draw.group()
创建一个 symbol，通过 use() 方法创建一个使用了这个 symbol 的 use 元素。
var symbol = draw.symbol()
symbol.rect(100, 100).fill('#f09')
var use = draw.use(symbol).move(200, 200)
defs 元素会在根 svg 创建的时候就创建好，是无法再创建一个的（当然，其实你还是可以通过 draw.element('defs')或draw.svg('<defs></defs>')的方式创建一个）。获取 defs 实例对象引用的方法是 defs()
var defs = draw.defs()
所有子元素都可以创建一个超链接。下面方法先创建了一个 a 元素，再嵌入 rect 元素。
var link = draw.link('http://svgdotjs.github.io/')
var rect = link.rect(100, 100)
a 对象的一系列方法：
link.to('http://apple.com') // 修改 href 属性
link.show('replace') // 创建 xlink:show 属性
link.target('_blank')
rect.linkTo('http://svgdotjs.github.io/') // 也是修改 href 属性，不过这个是通过子元素的方法修改的。
rect.linkTo(function(link) {
link.to('http://svgdotjs.github.io/').target('_blank')
})
Elements
下面我们说一说 svg 下的元素的创建方式
创建一个 rect：
var rect = draw.rect(100, 100) // 创建宽高为 100 的 rect
创建一个 circle:
var circle = draw.circle(100) // 创建一个直径为 100 的圆，如果没有设置 cx，cy 属性的话，会默认设置为 (半径, 半径) 为圆心。
创建一个 Eillpse：
var ellipse = draw.ellipse(200, 100)
创建一个 line:
var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })
line.array() 可以返回一个 SVG.PointArray 实例。通过它的 value 属性能获得 line 两个点的坐标。
line.plot() 可以重新设置两个坐标的位置。参数可以是多种类型：可以是4个数字，也可以是逗号或空格分隔数字的字符串，也可以是两个记录了点坐标的二维数组，甚至可以是一个 SVG.PointArray 实例。
创建一个 polyline:
var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
同样，我们可以通过 array() 方法获取 polyline 的所有点坐标，使用 plot() 方法来重新设置各个点的位置。
创建一个 polygon：
var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
polygon 和 polyline 不同，会自动首位点相连形成一个多边形，用法和 polyline 类似，这里就不展开了。
创建一个 path：
draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
参数除了可以用字符串外，还可以使用传入数组的形式。
path.length() 可以获取 path 的长度。path.pointAt() 可以获取给定长度的点的位置。需要注意的是，path.array() 返回的数组，其命令都会转为绝对定位（如 c, v, q 会被转化为 C, V, Q）。因为 path 的很多方法（比如move）使用绝对坐标进行计算更方便一些。
创建一个 text：
var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
svg 中的 text 的使用非常麻烦，svg.js 对于 text 的创建方法进行了优化。构造方法传入的字符串，除了创建一个 text， 还会自动创建一个 tpan，且会自动设置一个偏移量。如果字符串中有换行符，会创建多个 tspan。
参数除了可以是数组，也可以是一个函数：
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()
})
这里的 newline() 方法其实是给一个 tspan 设置了一个 dy 属性。如果不调用这个方法，该 tspan 会上移，这是 svg 自己的原因。
如果你不想创建 tspan，只想在 text 下直接添加内容：
var text = draw.plain('Lorem ipsum dolor sit amet consectetur.')
text.build() 可以开启关闭 build 模式。如果关闭，在通过plain() 和 tspan() 方法添加新内容前，会先执行 clear() 清空 text 下的所有内容。默认情况下 build 模式是关闭的，即会重置 text的意思。
text.clear() 会清空 text 元素下的所有内容。text.length() 则会计算所有可计算文字的长度。
text.font() 可设置字体格式，如：
text.font({
family: 'Helvetica'
, size: 144
, anchor: 'middle'
, leading: '1.5em'
})
text.font('family', 'Menlo') // 也可以用键值对的形式。如果只有一个参数，可以获得这个参数代表的属性的值。
tspan 通过 dy 属性来定义高度，通过 x 属性来重置水平位置。如果想设置行高，只能通过 dy 属性来模拟。svg.js 提供了 text.leading() 来设置行高。如果该方法不传参，则会返回当前的 leading 值。
text.leading(1.5) // 设置为字体大小的 150%
text.lines() 可以得到第一级的 tspan 元素引用的数组。text.plain('str') 可以创建不包含任何style和 tspan 元素的 text。text.text() 可以设置或读取 text 元素下的文本内容。
先到这里，还有其他元素的方法，下一篇文章再说。
网友评论