SVG Text
SVG Text （SVG文本）
Description of the <text> element
Description of the <text> element
The SVG <text> element specifies a graphics element consisting of a text. It is possible to apply a pattern, clipping path, mask, gradient, or filter to <text>, like other SVG graphics elements. The text not included within a <text> element will not be rendered. Whereas the text included within a <text> element can be rendered auto-wrapped, pre-formatted, or on a path.
SVG text supports such typographic features as text decorations, choice of typeface, and use of discretionary, stylistic, or historical ligatures. （SVG文本支持文字装饰、字体选择以及使用自由裁量、文体或历史连字等排版功能。）
SVG also supports international text processing needs: （SVG还支持国际文本处理需求：）
left-to-right or bidirectional text, （-从左到右或双向文本，）
the vertical and horizontal orientation of text, （-文本的垂直和水平方向，）
complex text layout, （複合文字版面配置）
glyph alignment to different baselines. （-字形与不同基线对齐。）
It is possible to have multi-language SVG content by substituting various text strings based on the preferred language of the user. （通过根据用户的首选语言替换各种文本字符串，可以拥有多语言SVG内容。）
To style text, you can use text-specific CSS properties such as font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width, and fill. （要设置文本样式，可以使用特定于文本的CSS属性，例如font-family、font-size、kerning、letter-spacing、word-spacing、text-decoration、stroke、stroke-width和fill。）
Example of the SVG <text> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" >
<text x="20" y="25" fill="purple">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Example of the SVG <text> element with the rotate attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="150" style="border:1px solid red">
<text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
In the following example, the <text> element is used with the <tspan> element, which can contain different formatting and position.
Example of the SVG <text> element used with the <tspan> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="450" height="150" style="border:1px solid #cccccc">
<text x="20" y="20" style="fill:green">
Example of the SVG "text" element used with the "tspan" element
（SVG “text”元素与“tspan”元素一起使用的示例）
<tspan x="25" y="65">This is a SVG text.</tspan>
<tspan x="35" y="90">This is a SVG text.</tspan>
<tspan x="45" y="115">This is a SVG text.</tspan>
</text>
Sorry, your browser doesn't support inline SVG.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Example of the SVG <text> element used with the <a> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:1px solid #cccccc">
<a xlink:href="https://www.w3cdoc.com/learn-html/svg-intro.html" target="_blank">
<text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
</a>
Sorry, your browser doesn't support inline SVG.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html
Attributes
Attributes （属性）
| Attribute | Description |
|---|---|
| x | Specifies the starting x coordinate of the text baseline. |
| y | Specifies the starting y coordinate of the text baseline. |
| dx | Specifies a text position’s horizontal shift from a previous text position. |
| dy | Specifies a text position’s vertical shift from a previous text position. |
| rotate | Specifies the rotation of orientation for each individual glyph. |
| lenghtAdjust | Specifies how the text is compressed or stretched for fitting the width defined by the textLenght attribute. |
| textLenght | Specifies the width that the text must fit. |
The SVG <text> element also supports the Global Attributes and Event Attributes.