SVG lengthAdjust Attribute

Last Updated : 16 Dec, 2020

The lengthAdjust attribute is used to decide the stretching of the text within the length defined by the textLength attribute. The elements which are using this attribute are <text>, <textPath>, <tref>, and <tspan>.

Syntax:

lengthAdjust = spacing | spacingAndGlyphs

Attribute values: The lengthAdjust attribute accepts the values mentioned above and described below.

spacing: It will adjust the spacing between glyphs but will not stretch or squeeze the glyphs themselves.
spacingAndGlyphs: It will adjust both spacing between glyphs and glyph size.

Note: The default value of lengthAdjust attribute is spacing.

Below examples illustrates the use of lengthAdjust attribute.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style: italic; 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;  
            margin-left: 35px; 
            font-size: 25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Stretched with spacing only:- 
            </text> 
  
            <text x="0" y="35" textLength="300" 
                lengthAdjust="spacing"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style: italic; 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;  
            margin-left: 35px; 
            font-size: 25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Stretched with spacing 
                and glyphs:- 
            </text> 
  
            <text x="0" y="35" textLength="300"
                lengthAdjust="spacingAndGlyphs"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html> 

Output:

Example 3:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style: italic; 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;  
            margin-left: 35px; 
            font-size: 25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Shrunk with spacing only:- 
            </text> 
  
            <text x="0" y="35" textLength="100"
                lengthAdjust="spacing"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html> 

Output:

Example 4:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            font-style: italic; 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;  
            margin-left: 35px; 
            font-size: 25px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg xmlns="http://www.w3.org/2000/svg"> 
        <g> 
            <text class="geek" x="0" y="15"> 
                Shrunk with spacing 
                and glyphs:- 
            </text> 
            <text x="0" y="35" textLength="100"
                lengthAdjust="spacingAndGlyphs"> 
                A Computer Science 
                portal for geeks. 
            </text> 
        </g> 
    </svg> 
</body> 
  
</html> 

Output:

My Personal Notes

Related Articles

HTML

HTML

HTML

HTML