Open In App

SVG lengthAdjust Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads