# 1. 相关术语

术语 说明
字符 XML中,字符是指带有一个数字值得一个或多个字节,数字值与Unidode标准对应
符号 字符的视觉呈现。每个字符可以有多种视觉呈现
字体 代表某个字符集合的一组符号
基线 字体中所有符号以基线对齐
上坡度 基线到字体中最高字符的顶部距离
下坡度 基线到最深字符底部的距离
大写字母高度、x高度 大写字母高度是指基线上大写字母的高度,x高度是基线到小写字母x顶部的高度

# 2. 文本元素的基本属性

text 元素以指定的x和y值作为元素内容第一个字符的基线位置,默认样式黑色填充、没有轮廓。

属性 说明
font-family 以空格分割的一系列字体名称或通用字体名称
font-size 如果有多行文本,则 font-size 为平行的两条基线的距离
font-weight 两个值:bold(粗体)和nromal(默认)
font-style 常用的两个值:italic(斜体)和normal
text-decoration 可能的值:none,underline(下划线),overline(上划线),line-through(删除线)
word-spacing 单词之间的距离
letter-spacing 字母之间的间距
text-anchor 对齐方式:start,middle,end
textLength 设置文本的长度
lengthAdjust 在指定了textLength时,可以通过lengthAdjust属性设置字符的调整方式,值为 spacing(默认)时,只调整字符的间距。当值为spacingAndGlyphs时,同时调整字符间距和字符本身的大小

# 3. tspan元素

text 元素无法对文本进行换行操作,如果需要分行显示文本,则需要使用 tspan 元素。tspan 元素与htmlspan元素类似,可以嵌套在文本内容中,并可以单独改变其内部文本内容的样式。

tspan元素除大小,颜色等表现样式之外,还可以设置以下属性:

属性 说明
dx,dy xy方向的偏移
x,y tspan进行绝对定位
rotate 旋转字符,可以同时设置多个值,这些值会依次作用在tspan包裹的字母上
baseline-shift dy属性设置上下标相比,这个属性更方便,当为super时,会上标。sub 时为下标。仅仅在所在的tspan内有效

# 4. 纵向文本

文本一般从左到右排列,如果需要上下排列,则需要使用writing-mode属性。

设置writing-mode属性值为tb(top to bottom),可以将文本上下排列。

# 5. 文本路径

如果要使得文本沿着某条路径排列,则需要使用textPath元素。需要将文本放在textPath元素内部,然后使用textPath元素的xlink:href属性引用一个定义好的path元素。

<defs>
	<path id="path" d="M30 40 C 50 10 ,70 10,120 40 S150 0,200 40" style="fill:none;stroke:black"></path>
</defs>
<g transform="translate(10,50)">
	<path id="path" d="M30 40 C 50 10 ,70 10,120 40 S150 0,200 40" style="fill:none;stroke:black"></path>
	<text>
		<textPath xlink:href="#path">
			hello world
		</textPath>
	</text>
</g>
<g transform="translate(10,100)">
	<path id="path" d="M30 40 C 50 10 ,70 10,120 40 S150 0,200 40" style="fill:none;stroke:black"></path>
	<text>
		<textPath xlink:href="#path" startOffset="50%" text-anchor="middle">
			hello world
		</textPath>
	</text>
</g>

startOffset属性用来指定文本的起点,当设置为50%,并且设置text-anchormiddle时,文本会被定为在path的中间。

最后更新: 2021/7/5 下午5:48:01