El atributo de anclaje de texto se utiliza para alinear un texto que se ajusta automáticamente o tiene un formato previo. El área de envoltura se decide a partir de la propiedad de tamaño en línea con respecto a un punto dado. En caso de texto de varias líneas, la alineación se realiza para cada línea. Solo tiene efecto en los siguientes elementos <altGlyph>, <text>, <textPath>, <tref> y <tspan>
Sintaxis:
text-anchor = start | middle | end
Valores de atributo: el atributo text-anchor acepta los valores mencionados anteriormente y descritos a continuación:
- inicio: con este valor de atributo, los caracteres se alinean de modo que el inicio de la string de texto se encuentre en la posición inicial del texto actual.
- medio: con este valor de atributo, los caracteres se alinean de modo que el medio de la string de texto esté en la posición actual del texto.
- final: con este valor de atributo, los caracteres se desplazan de manera que el final del texto representado resultante se encuentre en la posición inicial del texto actual.
Ejemplo 1: Los siguientes ejemplos ilustran el uso del atributo de anclaje de texto .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
text {
font: 20px sans-serif;
}
</style>
</head>
<body>
<svg viewBox="0 0 420 420"
xmlns="http://www.w3.org/2000/svg">
<path d="M60 15 L60, 50 M30, 40
L90, 40" stroke="green" />
<text text-anchor="start" x="60"
y="40" stroke="green">
GeeksforGeeks
</text>
<circle cx="60" cy="40" r="3"
fill="green" />
</svg>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
text {
font: 20px sans-serif;
}
</style>
</head>
<body>
<svg viewBox="0 0 420 420"
xmlns="http://www.w3.org/2000/svg">
<path d="M60 15 L60, 50 M30,
40 L90, 40" stroke="green" />
<text text-anchor="middle" x="60"
y="40" stroke="green">
GeeksforGeeks
</text>
<circle cx="60" cy="40" r="3" fill="green" />
</svg>
</body>
</html>
Producción:
Ejemplo 3:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
text {
font: 20px sans-serif;
}
</style>
</head>
<body>
<svg viewBox="0 0 420 420"
xmlns="http://www.w3.org/2000/svg">
<path d="M60 15 L60, 50 M30,
40 L90, 40" stroke="green" />
<text text-anchor="end" x="60"
y="40" stroke="green">
GeeksforGeeks
</text>
<circle cx="60" cy="40" r="3" fill="green" />
</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