2009-11-13 21 views
7

Estoy intentando que un elemento SVG 'text' encaje dentro de un elemento svg 'rect'. p.ej. En el siguiente ejemplo, utilicé un texto monoespacial de 5 caracteres con un tamaño de fuente de 100 px y esperaba tener un rectángulo delimitador cerca del texto.SVG, texto, fuente con anchura/altura fija

Pero hay un espacio en blanco a la derecha del texto.

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="1000"> 
    <text x="10px" y="110px" style="font-family:monospace;font-size:100px;">HELLO</text>  
    <rect x="10px" y="10px" width="500px" height="100px" style="stroke:blue;fill:none;"/> 
</svg> 

¿Qué selectores CSS debo usar para el elemento 'texto'?

Nota: No deseo utilizar el método de texto en una ruta. Solo una fuente con un tamaño fijo.

Gracias;

Respuesta

8

El tamaño de una fuente determina su altura, no su ancho; y los personajes raramente son cuadrados.

Por lo que yo sé, no hay forma de determinar el ancho de un texto monoespacial de manera confiable a través de CSS.

Bueno, CSS3 tiene el ch unit, que es el ancho del carácter 0. Eso funcionaría para el texto monoespacio. Pero no es compatible con SVG.

Puede establecer un ancho fijo en píxeles, por supuesto. Un ancho de 300 píxeles funciona para mí. Pero luego, si alguien más usa una fuente monoespaciada diferente, el ancho fijo podría estar desactivado. Si agrega el font-family:monospace;font-size:100px; en el <rect> también, puede establecer el ancho del rectángulo en em s. Pero no creo que eso sea más confiable.

Puede, sin embargo, utilizar secuencias de comandos. Puede utilizar getComputedTextLength() para obtener la longitud de texto de un text element:

<script type="text/javascript"> 
document.getElementById('rect').setAttribute(
    'width', 
    document.getElementById('text').getComputedTextLength() 
); 
</script> 

Añadiendo que al final de su SVG (y añadiendo el elemento apropiado IDs) funciona en Opera 10, Firefox 3.5 y Safari 4.0, por lo menos.

Y mientras lo hace, puede usar getBBox() también, para obtener el cuadro delimitador del elemento de texto para que pueda establecer la altura del rectángulo para que coincida con el tamaño de fuente, en caso de que alguna vez decida cambiar la fuente tamaño.

Cuestiones relacionadas