SVG <text> 和 <tspan>
SVG 文本 - <text>
<text> 元素用于定义文本。
<text> 元素有七个基本属性用于定位和旋转文本
| Attribute | 描述 |
|---|---|
| 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> 元素有六个基本属性用于定位和旋转文本
| Attribute | 描述 |
|---|---|
| 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>
自己动手试一试 »
