SVG <text> 和 <tspan>
SVG 文本 - <text>
<text> 元素用于定义文本。
<text> 元素有七个基本属性来定位和旋转文本
| 属性 | 描述 |
|---|---|
| x | 文本开始位置的 x 坐标。默认值为 0 |
| y | 文本开始位置的 y 坐标。默认值为 0 |
| dx | 文本的水平偏移位置（相对于前一个文本位置） |
| dy | 文本的垂直偏移位置（相对于前一个文本位置） |
| rotate | 应用于文本中每个字母的旋转（以度为单位） |
| textLength | 文本必须适合的宽度 |
| lengthAdjust | 文本如何压缩或拉伸以适应 textLength 属性定义的宽度 |
一个简单的文本
用 SVG 写一个简单的文本
这是 SVG 代码
示例
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="15" fill="red">我爱 SVG!</text>
</svg>
动手试试 »
一个没有填充的文本
一个没有填充，只有描边的文本
这是 SVG 代码
示例
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="none" stroke="red" font-size="35">我爱 SVG!</text>
</svg>
动手试试 »
一个有填充和描边的文本
一个有填充和描边的文本
这是 SVG 代码
示例
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="pink" stroke="blue" font-size="35">我爱 SVG!</text>
</svg>
动手试试 »
旋转文本中的每个字母
使用 rotate 属性，按度数旋转文本的每个字母
这是 SVG 代码
示例
<svg height="40" width="200">
<text x="5" y="30" fill="red" font-size="35" rotate="30">我爱 SVG!</text>
</svg>
动手试试 »
旋转整个文本
使用 transform 属性旋转整个文本
这是 SVG 代码
示例
<svg height="100" width="200">
<text x="5" y="30" fill="red" font-size="25" transform="rotate(30 20,40)">我爱 SVG!</text>
</svg>
动手试试 »
SVG 文本 - <tspan>
<tspan> 元素用于标记文本的各个部分（就像 HTML <span> 元素一样）。
<tspan> 元素必须是 <text> 元素或另一个 <tspan> 元素的子元素。
<tspan> 元素有六个基本属性来定位和旋转文本
| 属性 | 描述 |
|---|---|
| x | 设置 tspan 中文本开始位置的新的绝对 x 坐标 |
| y | 设置 tspan 中文本开始位置的新的绝对 y 坐标 |
| dx | tspan 中文本的水平偏移位置（相对于前一个文本位置） |
| dy | tspan 中文本的垂直偏移位置（相对于前一个文本位置） |
| rotate | 应用于 tspan 中文本每个字母的旋转（以度为单位） |
| textLength | tspan 中文本必须适合的宽度 |
使用 <tspan> 元素
在 <text> 元素中使用 <tspan> 元素
这是 SVG 代码
示例
<svg height="40" width="250" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="red" font-size="35">我爱
<tspan fill="none" stroke="green">SVG</tspan>!
</text>
</svg>
动手试试 »
