SVG入门-文字SVG 文字该部分分为4个主要部分： <text>和<tspan>标签详解文本水平垂直居中问题 <t

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="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" dy="100" fill="black" style="font-size:40px;">
        <tspan fill="blue" dy="-20 10">ts</tspan><tspan fill="red">pan测试</tspan>
    </text>
    <path d="M100,0 V200 M0,100 H200" stroke="red"/>
</svg>

在这里插入图片描述

需要注意的是：

两个标签不支持自动换行。
可以用style属性设置样式（基本支持大部分CSS属性）。
可以通过程序计算dx、dy值来得到各自文字排版（像波浪形或一些函数曲线）。
text和tspan标签设置的dx、dy属性是会往下传递的。也就是在没有设置情况下，后面字符会用沿用上一个字符的dx、dy值。
如果tspan设置了dx、dy属性，就会覆盖text标签上的dx、dy值，而不是叠加计算。

文本水平垂直居中

text-anchor属性可设置文本水平排列，有三个取值 start | middle | end。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px;">text</text>
    <text x="200" y="100" text-anchor="middle"  fill="black" style="font-size:40px;">text</text>
    <text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px;">text</text>
    <path d="M200,0 V200 M0,100 H400" stroke="red"/>
</svg>

在这里插入图片描述 dominant-baseline属性可设置文本垂直排列。居中效果不像不理想。

<textpath>

<textpath>可以让文本在指定路径上排列。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink ="http://www.w3.org/1999/xlink">
    <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/>
    <text style="font-size:20px;">
        <textPath xlink:href="#p1">textpath可以让文本在指定路径上排列,textpath可以让文本在指定路径上排列</textPath>
    </text>
</svg>

在这里插入图片描述超出Path的部分，浏览器不进行渲染。

<textpath>的渲染原理大致如下: 在这里插入图片描述

浏览器会算出第一个字符的宽度。
结合路径的起点得到另一个点。
取得中间的那个点做一条的切线和法线。
然后将该字符放到这个位置上。
将上一个字符最后一个点作为下一个字符的起点。
循环第1步，直到文本渲染完毕。

文本在路径上的偏移可以用定位属性 x, y,dx,dy，text-anchor和startOffset属性。在这里插入图片描述从上图可得到结论：

x/dx/startOffset可以设置字符在路径上的渲染起点。
y属性设置是没有任何效果的。
dy可设置字符在法线上的偏移。
text-anchor是设置文本水平排列效果。

属性	描述
xlink:href	指定链接地址
xlink:title	指定链接提示
target	指定打开目标