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文本，需要自己充电。
返回目录
发表于 2024-11-10 08:35
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-11-10 09:37
发表于 2024-11-10 09:44
发表于 2024-11-10 11:34
楼主