Ottieni la lunghezza in pixel di stringa in Svg

Question

Attualmente sto lavorando con SVG. Ho bisogno di conoscere la lunghezza della stringa in pixel per fare un po 'di allineamento. Come posso fare per ottenere la lunghezza di una stringa in pixel?

Aggiornamento: Grazie a nrabinowitz. Sulla base del suo aiuto, ora posso ottenere la lunghezza del testo con aggiunta dinamica. Ecco un esempio:

<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> 

Answer 1

Me lo chiedo anche questo, e sono rimasto piacevolmente sorpreso di scoprire che, secondo le specifiche SVG, c'è una funzione specifica per restituire queste informazioni: getComputedTextLength()

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

lavoro violino (testato solo in Chrome): http://jsfiddle.net/jyams/

Answer 2

letta varie discussioni simili con interesse e ha beneficiato di alcune delle idee, ho creato una pagina che confronta tre dei metodi JavaScript side-by-side . Ho notato risultati in

IE9

Firefox 29.0.1 e

Chrome 34.0.1847.131 m

È possibile caricare nel browser e vedere cosa funziona per voi:

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