SVG内の文字列のピクセル長を取得

Question

現在SVGで作業しています。いくつかの整列を行うために、文字列の長さをピクセル単位で知る必要があります。文字列の長さをピクセルで取得するにはどうすればよいですか？

更新日： nrabinowitzに感謝します。彼の助けに基づいて、私は今動的に追加されたテキストの長さを得ることができます。次に例を示します。

<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

私もこれを思ってきた、と私はSVGの仕様に応じて、この情報を返すための特定の機能がある、ということを見つけるために驚いた：getComputedTextLength()

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

（Chromeのみでテスト）の作業フィドル：http://jsfiddle.net/jyams/

Answer 2

が関心を持つさまざまな類似のスレッドを読んで、いくつかのアイデアの恩恵を受けた、私はJavaScriptのメソッドのサイド・バイ・サイドの3を比較してページを作成しました。

：私は

IE9

のFirefox 29.0.1と

クローム34.0.1847.131メートル

あなたがお使いのブラウザでそれをロードし、あなたのために働くかを見ることができますで結果を指摘してきました

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