学习笔记——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!')

视频讲解

视频讲解