2010-07-22 22 views
13

¿Hay alguna forma de obtener métricas de fuentes en SVG? Me gustaría obtener: descenso, ascenso, altura máxima, avance.SVG y métricas de fuentes

Necesito esto para dibujar texto & gráficos juntos como en diagramas de flujo.

Por ejemplo, necesito dibujar un recuadro alrededor del texto, y dibujar una línea de conector desde el centro del tamaño ex (tamaño de la letra 'x'), y no desde el centro del lado de la caja.

Respuesta

3

Si tiene acceso DOM, entonces hay un número de SVG DOM methods for text elements. Luego está el método getBBox que está disponible en la mayoría de los elementos svg.

Si usted está tratando con SVGFonts, entonces los datos ya está disponible en formato XML como atributos normales, por ejemplo ascent, descent etc.

Para su uso-caso te recomiendo getBBox, ya que puede hacer frente a gráfico elementos también (en caso de que alguna vez quiera agregar más cosas que solo texto a los gráficos).

+2

Definitivamente no recomendaría usar 'getBox ', ya que solo respeta los límites absolutos del texto. Sin embargo, para colocar el texto correctamente, una vez tiene que respetar el ascenso y el descenso. El atributo 'y' de un SVGTextElement especifica la posición vertical de _baseline_. Por lo tanto, usar solo 'BBox' no ayudaría mucho. El problema es que los métodos SVG DOM no permiten consultar la información de ascenso y descenso. No tengo idea de por qué falta esto en el Spec. – radlan

+2

Para calcular el descenso, esto es lo que hice. Establezca "y" para el elemento de texto en SVG en cero. Ahora su línea base está en cero. A continuación, obtenga la propiedad "y2" de getBox y esa será la altura de su "descenso". – Chad