Nhận độ dài pixel của Chuỗi trong Svg

Question

Tôi hiện đang làm việc với SVG. Tôi cần biết chiều dài chuỗi theo pixel để thực hiện một số liên kết. Làm thế nào tôi có thể làm để có được chiều dài của một chuỗi trong pixel?

Cập nhật: Nhờ nrabinowitz. Dựa trên sự giúp đỡ của anh ta, bây giờ tôi có thể nhận được chiều dài của văn bản được thêm vào động. Dưới đây là một ví dụ:

<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

Tôi đã tự hỏi này quá, và tôi đã ngạc nhiên khi thấy rằng, theo spec SVG, có một chức năng cụ thể để trở lại thông tin này: getComputedTextLength()

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

Working fiddle (chỉ được thử nghiệm trong Chrome): http://jsfiddle.net/jyams/

Answer 2

Sau khi đọc đề khác nhau tương tự với sự quan tâm và hưởng lợi từ một số ý tưởng, tôi đã tạo ra một trang mà so sánh ba phương pháp Javascript side-by-side . Tôi đã ghi nhận kết quả trong

IE9

Firefox 29.0.1 và

Chrome 34.0.1847.131 m

Bạn có thể tải nó trong trình duyệt của bạn và xem những gì làm việc cho bạn:

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