SVG lengthAdjust Attribute
Last Updated :
31 Mar, 2022
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>
<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>
<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>
<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>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...