学习笔记——SVG.js中形状元素的创建及其相关方法
CreateElement
1）创建svg元素
在svg.js中，每个元素都是一个对象，可以通过构造它来创建：
import { Rect } from "@svgdotjs/svg.js"
var rect = new Rect().size(100, 100).addTo(draw)
// or to reuse an existing node
var rect = new Rect(node).size(100, 100)
或者通过在容器上使用构造函数：
var rect = draw.rect(100, 100)
2）使用属性创建svg元素
svg.js允许通过attr（）方法或调用move（）等专用方法来更改属性。然而，在构造时直接传递属性通常更容易：
var rect = new Rect({width: 100, height: 100}).addTo(draw)
// or
var rect = draw.rect({width: 100, height: 100})
这是构造后调用attr（）的简写。
2.Dom
SVG.Dom是SVG.js创建的所有Dom元素的基本原型。它提供了简单的Dom功能，如attr（），并可用于HTML元素。
对于SVG.js未描述的所有元素，SVG.Dom类也很有用。
1）element()
SVG.Dom类可以用任何元素上的element（）方法实例化：
var element = draw.element('title')
作为第一个参数传递的字符串值是应该生成的节点名。
可选地，可以通过将属性作为第二个参数传递来直接添加属性：
var element = deraw.element('title', {id: 'myId'})
2）element.word()
SVG.Dom实例提供了添加纯文本的附加方法：
var element = draw.element('title').words('This is a title.')
3.Rect
1）rect(width, height)
rect有两个参数，宽度和高度：
var rect = draw.rect(100, 100)
2）rect.radius(number/(numberx, numbery))
rect可以设置圆角
rect.radius(10)
rect.radius(10, 20)
4.Circle
1）circle(diameter)
circle唯一需要的参数是直径：
var circle = draw.circle(100)
2）circle.radius(number)
rect可以设置半径
circle.radius(75)
5.Ellipse
1）ellipse(diameter)
ellipse有两个参数，宽度和高度：
var ellipse = draw.ellipse(100, 200)
2）ellipse.radius(number)
椭圆也可以通过其半径重新定义：
ellipse.radius(75)
6.Line
1）line(Ax, Ay, Bx, By)
绘制一条从A点到B点的线
var line = draw.line(100, 100, 100, 150).stroke({ width: 10, color: 'red' })
可以通过四种方式创建线元素。
2）line.array()
引用SVG.PointArray实例。该方法仅供内部使用：
line.array()
3）line.plot()
使用plot（）方法更新行：
line.plot(50, 30, 100, 150)
或者，它也接受点字符串：
line.plot('0,0 100,150')
或点阵列：
line.plot([[0, 0], [100, 150]])
或SVG.PointArray的实例：
var array = new SVG.PointArray([[0, 0], [100, 150]])
line.plot(array)
plot（）方法也可以设置动画：
line.animate(3000).plot([[200, 200], [100, 150]])
7.Polyline
1）polyline()
多线段元素定义一组连接的直线段。通常，多线段元素定义开发形状。
var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
多段线字符串由逗号或空格分隔的点列表组成。
例如：x,y x,y x,y 或 x y x y x y 或 x,y,x,y,x,y
作为替代方案，一组点也可以工作：
var polyline = draw.polyline([[0,0], [100,50], [50,100]])
甚至是首选的点的平面阵列：
var polyline = draw.polyline([0,0, 100,50, 50,100])
2）polyline.array()
引用SVG.PointArray实例。该方法仅供内部使用：
polyline.array()
3）polyline.clear()
解析给定的点数据时，将缓存结果。此方法清除缓存。
polyline.clear()
4）polyline.plot()
可以使用plot（）方法更新多段线：
polyline.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])
plot（）方法也可以设置动画：
polyline.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])
8.Polygon
1）polygon()
与多段线元素不同，多边形元素定义由一组连接的直线段组成的闭合形状：
var polygon = draw.polygon('0,0 100,50 50,100').fill('#000').stroke({ width: 1 })
多边形字符串或数组与多段线字符串完全相同。无需关闭形状，因为第一个点和最后一个点将自动连接。
2）polygon.array()
引用SVG.PointArray实例。该方法仅供内部使用：
polygon.array()
3）polygon.clear()
解析给定的点数据时，将缓存结果。此方法清除缓存。
polygon.clear()
4）polygon.plot()
可以使用plot（）方法更新多边形：
polygon.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])
plot（）方法也可以设置动画：
polygon.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])
9.Path()
1）path()
路径字符串类似于多边形字符串，但为了支持曲线，路径字符串要复杂得多：
draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
有关路径数据字符串的详细信息，请参阅有关路径数据的SVG文档。
2）path.array()
引用SVG.PointArray实例。该方法仅供内部使用：
path.array()
3）path.clear()
解析给定的点数据时，将缓存结果。此方法清除缓存。
path.clear()
4）path.length()
获取路径元素的总长度：
var length = path.length()
5）path.pointAt()
在给定长度的路径上获取点：
var point = path.pointAt(105)
6）path.plot()
可以使用plot（）方法更新路径：
path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
plot（）方法也可以设置动画：
path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)
对于合并到SVG.js中的路径，只有基本的支持，这意味着只有具有相同命令（M、C、S等）的路径才可以设置动画。
7）path.text()
可以使用text（）方法创建一个文本元素，其中文本路径链接到当前路径：
var textpath = path.text('SVG.js rocks!')
视频讲解
视频讲解