JavaScript para texto

facebook-svg gplus-svg twitter-svg

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:


        
          La letra p tiene rabito
        

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.