Online: 22488
Online: 22488
Online: 22488
Texts are used to write the text which we want to input in to the svg element by using <text> tag
In order to create the texts we use the <text> tag to create the text
<h3 style="color:blue"><i>SVG Texts</i></h3>
<svg width="300" height="150" style="border:3px solid green">
<text x="10" y="30">TechFunda </text>
</svg>
In the above code snippet we have defined the text using <text> tag, we have the svg width value 300 and height value 150 with the style as border as 3px solid green
<text> -It defines the textx, y - It defines the x coordinates of the text and y defines the y coordinates of the textoutput
It is used to rotate the text in svg by using HTML5, in order to rotate the text we need to add the rotate method
<h3 style="color:blue"><i>SVG Text rotate method</i></h3>
<svg width="300" height="150" style="border:3px solid green">
<text x="14" y="30" transform="rotate(60 10,80)" fill="blue">TechFunda </text>
</svg>
In the above code snippet we have defined the text with rotate method , we declared the text value as techfunda and we have used the transform method to rotate the text by using transform=rotate(60 10,80)
output
It is used to give a hyperlink to the text by using <a> tag
<h3 style="color:blue"><i>SVG text with link</i></h3>
<svg width="300" height="150" style="border:3px solid green">
<a xlink:href="http://www.techfunda.com">
<text x="14" y="30" fill="blue">TechFunda </text>
</a>
</svg>
In the above code snippet we have defined the text with link
The <a> (anchor) tag to define the link to the text and we have given the text in the <a> tag as techfunda the x and y values defined the x and y coodinates of the places of the text
output
