SVG <tspan> Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The SVG <tspan> element defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as per user needs.
Syntax:
<tspan attributes="" >
Subtext
</tspan>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 the text’s length.
- lengthAdjust: adjustments with the rendered length.
Example 1:
html
<!DOCTYPE html><html><body> <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <style> tspan { font: bold; fill: green; } </style> <text x="10" y="30" class="small"> <tspan>GeekforGeeks</tspan>: Computer Science Portal for Geeks! </text> </svg></body></html> |
Output:
Example 2: Fading the color of the rectangle
html
<!DOCTYPE html><html><body> <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <style> tspan { fill: green; font: bold 40px sans-serif;} </style> <text x="10" y="30" class="small"> This is <tspan>Large</tspan> Text </text> </svg></body></html> |
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 9 and above
- Firefox 1.5 and above
- Apple Safari 3 and above
- Opera 9 and above
.png)
