svg.js提供了多种方法来简化开发过程
bbox方法可以用来获取元素的位置，宽高等信息。还可以把多个box看作一个整体来测量
var box1 = draw.rect(100,100).move(50,50).bbox()
var box2 = draw.rect(100,100).move(200,200).bbox()
var box3 = box1.merge(box2)
box3返回的就是box1左上角，到box2右下角这一区域的信息
list方法可以把多个元素组成一个集合，这样就可以统一进行操作，方便管理
var rect = draw.rect(100,100)
var circle = draw.circle(100).move(100,100).fill('#f09')
var list = new SVG.List([rect])
list.push(circle)
list.fill('#ff0')
var allfilles = list.fill()
上面例子中的fill操作会作用在list的每一个元素中。动画animate这样的操作也可以对list使用。如果要遍历每个元素的话，可以使用each方法
Array和PointArray方法可以用来创建坐标点的集合，svg图形要涉及很多点的运算，所以Array和PointArray就是为方便处理坐标点。Array更像是JS中数组的拓展，PointArray支持创建一个二维的数组。例如下面的形式
new Array([ .343, .669, .119, 0, 0 ])
var array = new PointArray([[0, 0], [100, 100]])
const array2 = new PointArray('100,0 0,100 200,200')
它们有一些相似的方法，例如clone()深度克隆，to()和settle()会在做动画时使用，move()方法相当于在坐标系中对起点和终点做移动，reverse()可以翻转数组。size是对pointArray的方法，含义是重新定义元素的长宽比从而对实现对元素的缩放。例如官网中的例子
var array = new SVG.PointArray([[0, 0], [100, 100]])
array.move(100,100).size(222,333)
array.toString() //-> returns '100,100 322,433'
原本的长宽比是100/100，经过size后要改为222/333，所以最终起点和终点的坐标分别为(100,100)和(222,333)
pathArray()，则是由画笔命令和坐标点组成的二维数组，上面的某些方法也可以应用在pathArray上。
SVG.color可以用来创建颜色对象，传入的值可以是‘#fff’，这样的字符串，也可以是{r，g，b}这样的对象。并且可以利用rgb()，hls()方法做相互转换。SVG.color.random()函数会随机返回一个颜色。
SVG.Matrix是将一系列矩阵类型变换统一起来，最终一次性应用到元素上，例如：
const rect = draw.rect(50, 50).move(0, 0);
const m = new SVG.Matrix()
.scale(2) // 2 倍
.rotate(45) // 45°
.translate(100, 0); // 右移 100
rect.transform(m); // 一次应用
SVG.Number方法可以方便的对数字进行加减乘除，即使带单位。而to()方法可以做单位的转换。
SVG.Point可以用来创建一个点坐标，其中有to()，clone()，transform()，等方法。
SVG.EventTarget代表svg中的事件对象，有on()，off()，fire()，dispatch()等方法。
如果要导出已经绘制好的图案，可以使用.svg()函数，这个函数在整个项目或者单个元素上都存在，都可以使用。如果你只想要元素的内容，则可以传入false作为参数。
如果要在导出时对元素进行一些操作，可以传入一个回调函数
var tidied = draw.svg(function(node) {
if (node.fill() == 'blue') return false
return new Circle().radius(5).fill(node.fill())
})
node 代表导出元素的子元素，return false 代表导出时移除这个元素，return 其他内容就是替换当前元素。
如果想把已有的svg内容引入到当前元素中，也可以使用.svg()函数，传入对应的字符串就可。会将其追加到已有的元素最后一位。若同时传入第二个参数true的话，会直接替换当前元素。
除此之外也提供了.html和.xml的方法来做对应的导入导出
如果要在svg.js已有的元素能力上做拓展，可以使用SVG.extend()，例如：
import { SVG, extend as SVGextend, Rect } from '@svgdotjs/svg.js'SVGextend(Rect, {
h: function (duration) {
this.animate({ duration: duration }).attr({ fill: '#f03' })
return this
}
})
rect.h(3000).move(200, 200)
如果第一个参数是数组的话，就可以在多个对象上同时拓展方法。
基于JS中的class，可以做到自定义元素，例如：
SVG.Rounded = class extends SVG.Rect{
size: function(width, height) {
return this.attr({
width: width
, height: height
, rx: height / 5
, ry: height / 5
})
}
})
SVG.extend(SVG.Container, {
rounded: function(width, height) {
return this.put(new SVG.Rounded).size(width, height)
}
}
//使用
var rounded = draw.rounded(200, 100)
至此，大部分svg.js的内容都已经涉及到。当然以上只是简单介绍，更多信息可以查看svgjs.dev/docs/3.2/cl…
但目前ai能力的发展超乎想象，到底要在多大的程度上需要自己手写svg？感觉有一点没必要了。只要能看懂，能修改ai写的代码说不定也够。
