学习笔记——SVG.js中文本元素text相关方法

Text()

1）text()

与html不同，svg中的文本更难驾驭。无法创建流动文本，因此应手动输入换行符。在SVG.js中，有两种方法可以创建文本元素。
第一个也是最简单的方法是提供一个文本字符串，由换行符分隔：

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")

这将自动创建一个文本块，并在必要时插入换行符。

第二种方法会给你更多的控制，但需要更多的代码：

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

作为换行符的更方便的语法，也可以使用newLine（）构造函数代替tspan（…）.newLine（）：

var text = draw.text(function(add) {
  add.newLine('Same as')
  add.newLine('above').fill('#f06')
})

如果您想走另一条路，并且根本不想添加tspan，只添加一行文本，那么可以使用plain（）方法：

var text = draw.plain('Lorem ipsum dolor sit amet consectetur.')

这是SVG.Text实例上的普通方法的快捷方式，它根本不呈现换行符。

2）text.amove()

与其他元素不同，文本通常根据其基线和文本锚来定位。Svg.js让您可以通过左上角移动每个形状。
然而，有时需要通过基线和锚点移动文本。这可以通过amove（）实现

var text = draw.text('Some text for you')
text.amove(100, 50)

3）text.ax()/ay()

仅沿x/y轴移动元素的文本定位点：

text.ax(200)
text.ay(200)

在没有参数的情况下，ax（）/ ay（）方法充当getter：

var x = rect.ax()
var y = rect.ay()

4）text.build()

build（）可用于启用/禁用构建模式。在禁用构建模式的情况下，plain（）和tspan（）方法将在添加新内容之前首先调用clear（）方法。因此，当启用构建模式时，plain（）和tspan（）会将新内容追加到现有内容中。当将块传递给text（）方法时，在调用块之前和之后自动切换构建模式。但在某些情况下，手动切换可能会很有用：

var text = draw.text('This is just the start, ')

text.build(true)  // enables build mode

var tspan = text.tspan('something pink in the middle ').fill('#00ff97')
text.plain('and again boring at the end.')

text.build(false) // disables build mode

tspan.animate('2s').fill('#f06')

5）text.clear()

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

text.clear()

6）text.length()

获取所有tspan的总计算文本长度：

text.length()

7）text.font()

添加字体相关属性的一种方便方法：

text.font({
  family:   'Helvetica'
, size:     144
, anchor:   'middle'
, leading:  '1.5em'
})

与attr（）方法不同，font（）方法也接受键/值对：

text.font('family', 'Menlo')

可用的属性包括：

• leading (将执行与调用leading（）方法作为setter相同的操作)
• anchor (将设置文本定位属性)
• family (将设置字体系列属性)
• size (将设置字体大小属性)
• stretch (将设置字体拉伸属性)
• style (将设置字体样式属性)
• variant (将设置字体变量属性)
• weight (将设置字体加粗属性)

任何其他属性都将按规定适用。因此，例如，字母间距属性将只应用于attr（）方法。有关字体相关属性的更多信息，请点击此处。

正如您所期望的，font（）方法还充当getter：

var leading = text.font('leading')

8）text.leading()

SVG.js中的leading（）方法试图通过提供更接近html的行为来减轻痛苦。结合换行符分隔的文本，它的工作方式与html:

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
text.leading(1.3)

这将为每行呈现一个带有tspan元素的文本元素，dy值为字体大小的130%。
请注意，leading（）方法假设文本节点中的每个第一级tspan表示一个新行。在一行中包含多个tspan的文本元素上使用leading（）（例如，没有定义新行的换行tspan）将呈现混乱状态。因此，建议谨慎使用此方法，最好仅在向文本元素抛出换行符分隔的文本或在作为参数传递给文本元素的块中添加的每个第一级tspan上调用newline（）方法时使用。

获取当前leading值：

var leading = text.leading()

9）text.path()

在文本元素中创建textPath并返回textPath：

var text = draw.text(function(add) {
  add.tspan('We go ')
  add.tspan('up').fill('#f09').dy(-40)
  add.tspan(', then we go down, then up again').dy(40)
})

var 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'

var textpath = text.path(path).font({ size: 42.5, family: 'Verdana' })

10）text.textPath()

要获取文本中的文本路径，请使用textpath（）：

var textpath = text.textPath().attr('startOffset', '50%')

11）text.plain()

如果元素的内容不需要任何样式或多行，那么只添加一些纯文本就足够了：

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

12）text.rebuild()

这是一个可能永远不需要手动调用的内部回调。基本上，当修改服务器字体大小和x属性或文本元素的leading（）时，它会重建文本元素。此方法还充当setter以启用或禁用重建：

text.rebuild(false) //-> disables rebuilding
text.rebuild(true)  //-> enables rebuilding and instantaneously rebuilds the text element

13）text.text()

随后也可以使用text（）方法更改文本：

text.text('Brilliant!')

要获取原始文本内容：

text.text()

13）text.tspan()

也可以只添加一个tspan：

text.tspan(' on a train...').fill('#f06')

视频讲解

视频讲解