HTML5 > SVG

Texts in HTML5

How to create text using svg in HTML5?


Texts

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 text
  • x, y - It defines the x coordinates of the text and y defines the y coordinates of the text

output

Text with Rotate

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>

Text rotate

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

Text  with Hyperlink

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>

Text Hyperlink

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

 Views: 477 | Post Order: 123



Write for us