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