The SVG <text> element is used to draw text. There are some attributes to customize the text.
Syntax:
<text x="x-coordinates" y="y-coordinates" dx="list of lengths" dy="list of lengths" rotate="list of numbers" textlength="length" lengthAdjust="spacing" > </text>
Attribute:
- x: x axis coordinates of glyphs.
- y: y axis coordinates of glyphs.
- dx: shift along with x-axis.
- dy: shift along with y-axis.
- rotate: rotation of glyphs.
- textlength: render text’s length.
- lengthAdjust: adjustments with the rendered length.
Example:
html
<html>
<title>SVG Text</title>
<body>
<svg width="400" height="400">
<text x="40" y="40" fill="green">
GeeksforGeeks
</text>
</svg>
</body>
</html>
|
Output:
Example: Rotated multiline text.
html
<html>
<title>SVG Text</title>
<body>
<svg width="400" height="400">
<text x="10" y="10" fill="green"
transform="rotate(30 20, 40)">
GeeksforGeeks</text>
<text x="40" y="40" fill="green"
transform="rotate(90 10, 60)">
GeeksforGeeks</text>
</svg>
</body>
</html>
|
Output: