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: 

Output:

👁 Image
Example 2: Fading the color of the rectangle 

Output:

👁 Image

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