SVG中的tspan元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/28/SVG%E4%B8%AD%E7%9A%84tspan%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

作为<text>的子元素，在<text>中绘制子文本

attribute

x

基线起点的 x 坐标，默认为0

y

基线起点的 y 坐标，默认为0

dx

x 方向上，基线相对于 x 的偏移距离

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100">
        01234<tspan dx="30" style="fill:red">567</tspan>89
    </text>
</svg>

dy

y 方向上，基线相对于 y 的偏移距离

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100">
        01234<tspan dy="30" style="fill:red">567</tspan>89
    </text>
</svg>

rotate

文字的旋转角度

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100">
        01234<tspan rotate="180" style="fill:red">567</tspan>89
    </text>
</svg>