text文本、tspan子文本、textPath文本路径

一、text 文本

指令：text()

参数：text, x, y, fill

语法：text(text, x, y, fill)

<text> 标签的属性其实很多，出于简化，svgdr 仅封装：

① text - <text> 标签要显示的文本，字符型
② x - 文本起始点X坐标，数值
③ y - 文本起始点Y坐标，数字
④ fill - 文本填充色，字符型，缺省默认黑色

其它属性繁多，可通过 style() 和 set() 指令额外添加。这些未纳入 text() 指令的属性，有基于描边的 stroke、stroke-width、stroke-dasharray、stroke-dashoffset，基于文本间距的 letter-spacing、word-spacing，基于字体的 font-family、font-size、font-weight，基于文本对齐的 text-anchor、dominant-baseline 等等等等，要了解更多，可以参阅 svgdr文档 文本章节和text()指令的介绍，也应该查阅其它更详细的资料。

看实例来理解 text() 指令的用法：

svgdr绘制代码：

//普通输出文本 ：注意x、y的设置
dr1.text('天时地利与人和', 20, 30);
//文本着色、用 set() 指令设置字号
dr1.text('天时地利与人和', 20, 120, 'purple').set('font-size', 60);
//使用 style() 指令设置更多的属性
dr1.text('天时地利与人和', 20, 220).style('font-size: 60; fill: purple; stroke: red;');
//更多的属性设置 : dx、dy 未纳入CSS管理范畴
dr1.text('天时地利与人和', 20, 320).style('font-size: 60; fill: none; stroke: red; stroke-width: 2; stroke-dasharray: 2;').set('dx','100');
//垂直文本
dr1.text('天时地利与人和', 650, 20).set('font-size', 50).style('writing-mode: tb');
	

生成的SVG代码：

text标签没有换行功能，如果需要分行，分多少行就得设计多少个text标签。为了更方便换行，也为了能有更灵活的实现文本布局，svg提供了text元素的子元素——

二、tspan子文本

指令：tspan()

参数：str, x, y, dx, dy, style

语法：tspan(str, x, y, dx, dy, style)

tspan 是 text 的子元素，和HTML的span同理但比span更强大，可以独立设置其所管辖的文本。指令的参数中：

① str - 要在tspan中输出的文本，字符型
② x - 文本起始点X坐标，数值
③ y - 文本起始点Y坐标，数值
④ dx - 文本水平方向偏移值，数值
⑤ dy - 文本垂直方向偏移值，数值
⑥ style - 内联CSS样式表中
* tspan() 指令可以链接在 text() 指令之后，也可以在 text() 指令写完后另起一行用 dr.tspan() 完成自己的工作。

以下示例，svgdr 展示了如何在text标签内使用tspan子标签实现一首小诗的分行输出，里面的技巧只是改变一下span()指令的参数y；

svgdr 绘制代码：

var strAr = ['蜀魄关关花雨深，', '送师冲雨到江浔。', '不能更折江头柳，', '自有青青松柏心。'];
dr.text().style('fill: blue; font-size: 30px');
strAr.forEach( (s,k) => dr.tspan(strAr[k], 20, k * 40 + 40) );
	

对应的SVG XML代码：

三、textPath 文本路径

指令：textPath()

参数：pathId, [offset]

语法：textPath(pathId, [offset])

svg制作的是矢量图形，对文本的处理不能只限于非横即竖的布局，textPath元素就是用于帮助text标签完成文本按路径排列的功能。svgdr的 textPath() 指令收纳两个参数：

① pathId - 必须参数，textPath标签的id标识符，字符型
② offset - 可选参数，设置文本偏离路径起点的距离，数值
* svgdr未收入的其他参数可以通过set()、style() 等指令补充
* textPath() 指令可以链式使用在 text() 指令之后，也可以写完 text() 指令后另起一行用 dr.textPath() 完成自己的工作。

下面的示例，演示text文本沿弧线路径的布局效果：

svgdr绘制代码：

//声明待输出字串
var tstr = '邻邑谷不登，我土丰粢盛。禾稼美如云，实系我使君。';
//创建一个可见路径，给它加个id便于引用
dr.path('M60 60 A280 200, 0 0 0, 760 60', 'none', 'lightblue').id('path1');
//创建text标签，用 style() 指令设置样式，text-anchor: middle 配合文本路径的 offset 50% 可以确保文本在路径上水平居中，dominant-baseline: middle 使得文本在路径上垂直居中
dr.text(tstr).style('fill: darkred; font-size: 30px; font-weight: bold; text-anchor: middle; dominant-baseline: middle;').textPath('path1','50%');
	

svgdr生成的SVG代码：

本节介绍了text文本、tspan子文本、textPath路径文本在 svgdr 中的简单使用，它们涉及到的SVG文本知识与技巧只是冰山一角，要全面了解SVG文本，需要自己充电。

返回目录