El atributo lengthAdjust se usa para decidir la extensión del texto dentro de la longitud definida por el atributo textLength . Los elementos que utilizan este atributo son <text>, <textPath>, <tref> y <tspan>.
Sintaxis:
lengthAdjust = spacing | spacingAndGlyphs
Valores de atributo: el atributo lengthAdjust acepta los valores mencionados anteriormente y descritos a continuación.
- Espaciado: ajustará el espacio entre los glifos, pero no estirará ni apretará los glifos en sí.
- spacingAndGlyphs: ajustará tanto el espacio entre los glifos como el tamaño de los glifos.
Nota: El valor predeterminado del atributo lengthAdjust es espaciado.
Los siguientes ejemplos ilustran el uso del atributo lengthAdjust .
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA