Skip to content
Related Articles

Related Articles

SVG <tspan> element
  • Last Updated : 01 Oct, 2020

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: Fading the color of the rectangle

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Browsers Supported: The following browsers are supported by this SVG element:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :