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:
<!DOCTYPE html> < html > < body > < svg viewBox = "0 0 400 400" < 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 > |
chevron_right
filter_none
Output:
Example 2: Fading the color of the rectangle
<!DOCTYPE html> < html > < body > < svg viewBox = "0 0 400 400" < 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 > |
chevron_right
filter_none
Output:
Browsers Supported: The following browsers are supported by this SVG element:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera