SVG 文本

SVG 文本

SVG 中的 元素用于在 SVG 图像中添加文本内容，它允许你在指定的位置显示文本，并可以通过设置属性来控制文本的样式、字体、大小等。

基本语法

x="x-coordinate"

y="y-coordinate"

font-family="font"

font-size="size"

fill="fill-color"

text-anchor="anchor"

>

Text content

属性解析：

x 和 y 属性定义了文本左上角的坐标，即文本的起始点位置。

font-family 属性定义了文本的字体名称，可以是系统字体或自定义字体。

font-size 属性定义了文本的字体大小，以像素为单位。

fill 属性定义了文本的颜色。

text-anchor 属性定义了文本锚点，即文本相对于指定坐标的对齐方式，常用取值有 "start"（默认，左对齐）、"middle"（居中对齐）和 "end"（右对齐）。

以下代码在 SVG 图像中绘制了一段文本，文本内容为 "Hello, SVG!"，字体为 Arial，大小为 20 像素，颜色为蓝色，居中对齐，并且文本左上角的坐标为 (100, 100)。

Hello, SVG!

实例 1

写一个文本：

下面是 SVG 代码：

实例

I

love SVG

尝试一下 »

点击查看：查看 SVG 文件。

实例 2

旋转的文字：

下面是 SVG 代码：

实例

transform="rotate(30 20,40)">I

love SVG

尝试一下 »

点击查看：查看 SVG 文件。

实例 3

路径上的文字：

下面是 SVG 代码：

实例

xmlns:xlink="http://www.w3.org/1999/xlink">

I love SVG I love SVG

尝试一下 »

点击查看：查看 SVG 文件。

实例 4

元素可以安排任何分小组与 元素的数量。每个 元素可以包含不同的格式和位置。几行文本(与 元素):

下面是 SVG 代码：

实例

Several lines:

First line

Second line

尝试一下 »

点击查看：查看 SVG 文件。

实例 5

作为链接文本（ 元素）：

target="_blank">

尝试一下 »

点击查看：查看 SVG 文件。