2012-02-09 4 views
6

Problema: Tenemos que replicar el texto SVG que se creó en RaphaelJS con fuente de fuente variable, tamaño de fuente, posición, escala, rotación en SVG.Manipulando/traduciendo <text> en SVG (agregando un cuadro delimitador)

PERO ... Raphael usa un cuadro delimitador para texto que tiene una altura que es independiente de la altura real de la cuerda. La altura del cuadro delimitador se basa en el tamaño de fuente y la familia de fuentes, pero es independiente de la cadena real. Así que una cadena de "Y" y "," (con la misma fuente y tamaño de fuente) tienen la misma altura.

Cuando recreamos el texto en SVG (generándolo en PHP) podemos obtener el tamaño de fuente correcto y la familia de fuentes correcta. Sin embargo, la altura de SVG NO es independiente de la cadena real. Entonces, un "," tendría una altura mucho más baja que una "Y". Esta diferencia de altura rompe la rotación y el posicionamiento.

PREGUNTA: ¿Cómo creamos SVG con un ‘cuadro delimitador’ que se replica getBBox de RaphaelJS (que esencialmente sólo el tamaño de una caja que se ajuste a cualquier carácter en ella) para que podamos imitar la rotación y el posicionamiento de RaphaelJS? NOTA: Podemos convertir text-> path para SVG, si eso ayuda. También tenemos acceso a los archivos de fuentes.

enter image description here

EDITAR: La cuestión se resolvió utilizando el comando() matriz y traducir directamente las transformaciones a lo largo, en contraposición a la aplicación de posicionamiento, a continuación, escalado, a continuación, la rotación.

+1

Pregunta bien formulada, +1. Simplemente no entendí de dónde vienen los cuadros delimitadores, del ejemplo de PHP (en el ejemplo de JS utilizó una función RaphaelJS, entonces, ¿qué se está utilizando actualmente para generar ese cuadro delimitador "incorrecto" en el ejemplo de la derecha?). –

+0

+1 de mí también, y yo también estaría interesado en saber cómo se leen los recuadros delimitadores de PHP (cc @CamiloMartin). Actualmente estoy usando 'inkscape' como he explicado aquí (http://stackoverflow.com/a/10078156/472495) pero sería bueno ver si hay una mejor manera. – halfer

Respuesta

1

Si está buscando manipular las posiciones de los caracteres dentro de las palabras: oraciones y el SVG que está generando en el servidor, entonces debería poder usar SVG TSPAN y orientar la posición del carácter. Si puede cambiar las letras a la ruta entonces creo que ese algoritmo sería posible. No hay nada que le impida crear una variedad de posiciones relativas para su conjunto de fuentes alfanuméricas. Espero que algo de lo anterior sea útil ...

Cuestiones relacionadas