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"
<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"
<text y="20" textLength="100%">
A Computer Science portal.
</text>
</svg>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...