<text> element is used to draw text.
Declaration
Following is the syntax declaration of <text> element. We’ve shown main attributes only.
<text x="x-cordinates" y="y-cordinates" dx="list of lengths" dy="list of lengths" rotate="list of numbers" textlength="length" lengthAdjust="spacing" > </text>
Attributes
| Sr.No. | Attribute & Description |
|---|---|
| 1 | x − x axis coordinates of glyphs. |
| 2 | y − y axis coordinates of glyphs. |
| 3 | dx − shift along with x-axis. |
| 4 | dy − shift along with y-axis. |
| 5 | rotate − rotation applied to all glyphs. |
| 6 | textlength − rendering length of the text. |
| 7 | lengthAdjust − type of adjustment with the rendered length of the text. |
Example
testSVG.htm
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Text with rotate
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Multiline Text
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="570" height="100">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Hyper link Text
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="10" >Text as Link: </text>
<a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
<text font-family="Verdana" font-size="20" x="30" y="30"
fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</a>
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering.
Table of Contents
1.svg tutorial
2.svg overview
3.svg shapes
4.svg text
5.svg stroke
6.svg filters
7.svg patterns
8.svg gradients
9.svg interactivity
10.svg linking
11.svg loaders
12.svg dialog box effects
13.svg icons
14.svg clock
15.svg drag
16.svg keypoint
17.svg maps
18.svg amchart
19.svg graph
20.svg flat surface shade
21.svg image filter effect
22.svg text effects
23.svg text with css effects
24.svg arrow effects
25.svg brand effects
26.svg gooey effects
27.svg gradients
28.svg playful effects
29.svg scroll effects
30.svg slide show effects
31.svg tab effects
32.svg raphaeljs effects
33.svg velocityjs effects
34.svg walkwayjs effects
35.svg zpath
36.svg vaguejs effects
37.svg transformation effects
38.svg full screen overlay effects
39.svg laylinepainterjs effects
40.svg demo game
41.svg real time svg ad
42.svg questions and answers tutorialspoing
43.svg quick guide
44.svg useful resources
45.discuss svg