SVG <tspan> Element
Last Updated :
16 Jun, 2022
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"
< 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"
< 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
Share your thoughts in the comments
Please Login to comment...