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!')
视频讲解
视频讲解