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.