SVG入门-文字

SVG 文字

---

该部分分为4个主要部分：

• <text>和<tspan>标签详解
• 文本水平垂直居中问题
• <textpath>让文本在指定路径上排列
• 插入超链接
  
  

<text>和<tspan>

---

<text>和<tspan>标签是定义文本的基本标签。

<text>

---

参数	描述	默认值
x	文本绘制x轴位置	0
y	文本绘制y轴位置	0
dx	每个字符相对前一个字符的偏移距离	0
dy	每个字符相对前一个字符的偏移距离	0

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" dx="20 40 60 80 100" fill="black" style="font-size:40px;">text测试</text>
    <path d="M100,0 V200 M0,100 H200" stroke="red"/>
</svg>

文字并不是完全在左下角位置，而是在一个叫基线（baseline）的位置，所以文字会在哪个位置，还得看该字体的基线。

<tspan>

---

<tspan>标签是用在<text>标签里面的，也可嵌套使用。所有text标签可用的属性，tspan也都可以用。

<svg width