SVG textLength Attribute

Last Updated : 31 Mar, 2022

The textLength attribute allows you to enumerate the width of the space taken by the text. By using textLength, your SVG text will be displayed at the same width. Elements that are using this attribute includes: <text>, <textPath>, <tref>, and <tspan>.

Syntax:

textLength = length-percentage | number;

Attribute Values: The transform attribute accepts the values mentioned above and described below:

length-percentage: It enumerates the width of the space taken by the text to occupy an absolute length or percentage.
number: It is a numeric value referring to the units of the current coordinate system.

Below examples illustrate the use of textLength attribute

Example 1:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color:green; font-size:50px;">
        GeeksforGeeks
    </h1>

    <svg viewBox="0 0 300 160" 
        xmlns="http://www.w3.org/2000/svg">
        
        <text y="15" textLength="10em">
            A Computer Science portal.
        </text>
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<body>
    <h1 style="color:green; font-size:50px; 
                text-align:center;">
        GeeksforGeeks
    </h1>

    <svg viewBox="0 0 300 160" 
        xmlns="http://www.w3.org/2000/svg">
        
        <text y="20" textLength="100%">
            A Computer Science portal.
        </text>
    </svg>
</body>

</html>