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>

Output:

SVG to Attribute

thacker_shahid

Improve

Article Tags :

SVG textLength Attribute

Similar Reads

SVG Elements

SVG Properties

SVG Attributes

Thank You!

What kind of Experience do you want to share?