Obtener la longitud de píxel de String en Svg

Actualmente estoy trabajando con SVG. Necesito saber la longitud de la cadena en píxeles para hacer algo de alineación. ¿Cómo puedo hacer para obtener la longitud de una cadena en píxeles?Obtener la longitud de píxel de String en Svg

Actualización: Gracias a nrabinowitz. Con base en su ayuda, ahora puedo obtener la longitud del texto agregado dinámicamente. Aquí hay un ejemplo:

<svg id="main" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="1020" 
    height="620" 
    viewBox="0 0 1020 620" 
    onload="startup(evt)"> 

<script> 
    <![CDATA[ 
     var startup = function (evt) { 
      var width; 
      var svgNS = "http://www.w3.org/2000/svg"; 
      var txtNode = document.createTextNode("Hello"); 
      text = document.createElementNS(svgNS,"text"); 

      text.setAttributeNS(null,"x",100); 
      text.setAttributeNS(null,"y",100); 
      text.setAttributeNS(null,"fill","black"); 
      text.appendChild(txtNode);            
      width = text.getComputedTextLength();    
      alert(" Width before appendChild: "+ width);      
      document.getElementById("main").appendChild(text); 
      width = text.getComputedTextLength(); 
      alert(" Width after appendChild: "+ width) 
      document.getElementById("main").removeChild(text);    
     }  
    //]]> 
</script> 
</svg>

Fuente

2012-04-20 nxhoaf

en que idioma estas trabajando? – Jasper

Me refiero a Scalable Vector Graphics. – nxhoaf

Claramente, pero está procesando un svg en algún idioma, ¿verdad? – Jasper

Me he estado preguntando esto también, y me sorprendió gratamente al descubrir que, de acuerdo con la especificación SVG, hay una función específica para devolver esta información: getComputedTextLength()

// access the text element you want to measure 
var el = document.getElementsByTagName('text')[3]; 
el.getComputedTextLength(); // returns a pixel integer

violín de trabajo (sólo probado en Chrome): http://jsfiddle.net/jyams/

Fuente

2012-04-21 00:08:05 nrabinowitz

Gracias a su ayuda. Al hacer eso, podré obtener la longitud de un elemento estático, es decir, los elementos que se definieron anteriormente. Esta es mi solución basada en que ayuda a calcular la longitud del elemento dinámico agregado: http://jsfiddle.net/nxhoaf/Qzav3/4/ – nxhoaf

Esto no parece funcionar si el elemento de texto se diseña usando 'CSS'; el ancho de píxel calculado corresponde al tamaño de fuente predeterminado del documento. – Matze

@Matze - ¿en serio? Funciona bien para mí en Chrome: http://jsfiddle.net/jyams/91/ – nrabinowitz

Después de haber leído varios hilos similares con interés y se benefició de algunas de las ideas, he creado una página que compara tres de los métodos de Javascript de lado a lado . He observado resultados en

IE9

Firefox 29.0.1 y

Chrome 34.0.1847.131 m

Puede cargar en el navegador y ver lo que funciona para usted:

http://bl.ocks.org/MSCAU/58bba77cdcae42fc2f44.

Fuente

2014-05-10 01:03:27 MSC

Obtener la longitud de píxel de String en Svg

Respuesta

Cuestiones relacionadas