学习笔记——SVG.js中textPath、tspan元素相关方法

TextPath()

1）textpath()

要沿路径构造文本，可以使用textPath（）构造函数：

var textpath = draw.textPath('Some Text along a path', 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')

注意：如果给定的startOffset不是百分比，则该值表示沿当前用户坐标系中测量的路径的距离。

2）textpath.array()

获取textPath元素的路径数组：

var array = textpath.array()

3）textpath.plot()

更改textpath元素的路径：

text.textPath().plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200')

4）textpath.textPath()

直接引用textPath节点：

var textPath = text.textPath()

5）textpath.track()

直接引用被链接的路径元素：

var path = textpath.track()

注意：SVG.TextPath继承自SVG.Text，因此所有方法都会被继承。

6）SVG.Text事件

文本元素有一个事件。每次调用rebuild（）方法时都会触发：

text.on('rebuild', function() {
    
    
  // whatever you need to do after rebuilding
})

Tspan()

1）tspan()

tspan元素仅在文本元素或其他tspan元素中可用。

text.tspan('spannened')

2）tspan.clear()

清除调用的tspan元素的所有内容：

tspan.clear()

3）tspan.dx()/dy()

定义元素的动态x/y值，很像一个具有位置：relative和left/top定义的html元素：

tspan.dx(30)
tspan.dy(30)

4）tspan.plain()

只需添加一些纯文本：

tspan.plain('I do not have any expectations.')

5）tspan.length()

获取计算的总文本长度：

tspan.length()

6）tspan.newLine()f

newLine（）是一种方便的方法，用于使用当前的“leading”添加带有dy属性的新行：

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()
})

7）tspan.text()

更新tspan的内容。这可以通过传递字符串来完成：

tspan.text('Just a string.')

它将基本上调用plain（）方法：
或者通过传递一个块来在调用的tspan中添加更具体的内容：

tspan.text(function(add) {
    
    
  add.plain('Just plain text.')
  add.tspan('Fancy text wrapped in a tspan.').fill('#f06')
  add.tspan(function(addMore) {
    
    
    addMore.tspan('And you can doo deeper and deeper...')
  })
})

8）tspan.tspan()

添加嵌套的tspan：

tspan.tspan('I am a child of my parent').fill('#f06')

9）tspan.amove()

与text.amove()一样

视频讲解

视频讲解