JavaScript para texto
A continuación algunas funciones útiles para trabajar con texto en SVG:
getComputedTextLength
El método getComputedTextLength devuelve un número con decimales representando la longitud calculada del texto contenido dentro de un elemento (<text>, <tspan>, <textPath>)
Supongamos que tenemos el siguiente texto:
Para saber la longitud del texto contenido dentro del elemento #txt
console.log(txt.getComputedTextLength());Puedo hacer lo mismo utilizando la propiedad textLength:
console.log(txt.textLength.baseVal.value);getSubStringLength
El método getSubStringLength(charnum, nchars) devuelve un número con decimales representando la longitud calculada de un fragmento de texto que empieza con el carácter núm charnum y tiene nchars caracteres.
En el ejemplo de arriba, si queremos saber la longitud de la palabra "letra" podemps escribir:
console.log(txt.getSubStringLength(3,8));También podemos recuperar la longitud de todo el texto utilizando el método getSubStringLength
console.log(txt.getSubStringLength(0,-1));getStartPositionOfChar
El método getStartPositionOfChar devuelve un objeto que representan las coordenadas x e y del punto de partida de una letra. Se trata un punto DOMpoint representando la posición de un carácter en el documento. El punto se encuentra sobre la línea base ( baseline ) del texto
getEndPositionOfChar
El método getEndPositionOfChar devuelve un objeto que representan las coordenadas x e y del punto donde se acaba una letra. Se trata un punto DOMpoint representando la posición final de un carácter en el documento. El punto se encuentra sobre la línea base del texto.
getExtentOfChar
El método getExtentOfChar: devuelve un objeto que define un rectángulo DOMRect representando la caja delimitadora ( bounding box ) de una letra o carácter.
En el siguiente ejemplo el punto azul representa el punto de partida de del punto de partida de la letra p conseguida utilizando le método getStartPositionOfChar. El punto rojo representa el punto final de la letra p conseguida utilizando le método getEndPositionOfChar. El pequeño rectángulo gris representa la caja delimitadora de la letra p conseguida utilizando le método getExtentOfChar.
See the Pen SVG Text JS functions #1*** by Gabi (@enxaneta) on CodePen.
getRotationOfChar
El método getRotationOfChar: devuelve la rotación de una letra o carácter tipográfico, por ejemplo en el caso de un texto en un trazado o un tspan manipulado con rotate.
En el siguiente ejemplo saco en consola la rotación de la g de lugar (el carácter 8) y la M de Mancha (el carácter 18). Por favor abra este ejemplo en codepen y mire la consola del navegador
See the Pen SVG Text JS functions #2 by Gabi (@enxaneta) on CodePen.