SVG文本

字符、字形和字体

• 字符（characters）：要展示的字母的数字表示形式，每个字符都由特定的unicode定义。
  • A：01000001
  • a：0110000
• 字形（Glyphs）：字符的可视化表示形式，即显示出来的单个字
• 字体（Fonts）：字形的集合

字形和字体表被称为字体数据。

EM框

• Ascent：从字体的(0,0)点到EM框顶部的距离
• Descent：从字体的(0,0)点到EM框顶部的距离
• Baseline table：设计空间坐标系统中的基线的位置。

text元素

在一个SVG文档中，<text>元素内部可以放任何的文字，例如：<text>Hello World</text>

字体的属性如同CSS，例如：font-family、font-style、font-weight、font-size等等。

与CSS不同的地方在于，这些属性直接写在<text>标签内。例如：<text font-size="13px">Hello World</text>。

注意在为<text>设置字体属性时可以加上单位。

文本的位置

x=“0” y=“0”

<svg width="200" height="50" style="outline: 1px solid red; overflow:auto; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text>http://www.imooc.com</text>
</svg>

x=“x1 x2 x4 x5… xn” y=“x1 y2 y4 y5… yn”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text x="10 20 30 40 50 60 70 80 90 100" y="10 20 30 40 50 60 50 40 30 20 10">Hello World</text>
</svg>

可以按如上方法为<text>标签的x、y属性设置多个值，那么每一个值都是对字符串中的对应字符设置位置。

如果是设置的值得个数与字符串长度不匹配会怎样呢？例如：

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text x="10 20 30 40 50 60 70 80 90 100" y="10 20 30 40 50 60 50 ">Hello World</text>
</svg>

可以看出在属性y的值的个数与字符串长度不符时，其余未被显式设置位置的字符都会继承最后一个被设置位置的字符的y属性。

若是属性x的值的个数与字符串长度不符时，未被设置位置的字符则是正常的跟在最后一个被设置位置的字符后。

文本的偏移

dx=“dx” dy=“dy”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dx="10" dy="10">Hello World</text>
</svg>

dx=“x1 x2 x3…xn” dy=“y1 y2 y3 y4…yn”

与x、y属性一样，dx、dy一样可以设置多个值

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy="10 10 10 10 10 0 -10 -10 -10 -10 -10">Hello World</text>
</svg>

文本的旋转

rotate=“deg”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' rotate="45">Hello World</text>
</svg>

rotate=“deg1 deg2 deg3…degn”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' rotate="45 90 135">Hello World</text>
</svg>

文本的长度

textLength=“widthValue”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' textLength="200">Hello World</text>
</svg>

可以看出通过设置textLength把字符串长度强行拉伸到了200px宽。

在这个例子中，字符串的显示似乎占满了宽度。然而，我们为字符串多添加一个字符，结果就会是另一个样子：

这样看起来似乎又没有占满宽度。这是为什么呢？

原因在于前面提到的EM框，字体是放在一个个EM框中的，实际上是EM框的宽度被拉伸至刚好平铺宽度。

tspan元素

用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。例如：

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' textLength="200">Hello <tspan fill="red">World！</tspan></text>
</svg>