獲取Svg中字符串的像素長度

我目前正在使用SVG。我需要知道像素的字符串長度，以便進行一些對齊。我怎樣才能獲得像素中的字符串的長度？獲取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>

來源

2012-04-20 nxhoaf

你在用什麼語言工作？ – Jasper 2012-04-20 23:08:24

我的意思是可縮放矢量圖形。 – nxhoaf 2012-04-20 23:22:49

顯然，但你正在用某種語言處理svg，不是嗎？ – Jasper 2012-04-20 23:24:35

我一直在想這也和我驚喜地發現，根據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/

來源

2012-04-21 00:08:05 nrabinowitz

感謝您的幫助。通過這樣做，我將能夠獲得靜態元素的長度，也就是之前定義的元素。這裏是我的解決方案，基於你幫助計算動態添加元素的長度：http://jsfiddle.net/nxhoaf/Qzav3/4/ – nxhoaf 2012-04-21 09:21:20

如果文本元素使用CSS樣式，這似乎不工作;計算出的像素寬度對應於文檔的默認字體大小。 – Matze 2015-04-07 13:34:36

@Matze - 真的嗎？在Chrome中對我工作正常：http://jsfiddle.net/jyams/91/ – nrabinowitz 2015-04-13 16:59:20

已經認真閱讀各種類似的主題和一些想法受益，我創建了比較三個JavaScript方法頁面並排側。我注意到

IE9結果

火狐29.0.1和

的Chrome 34.0.1847.131米

您可以在瀏覽器中加載它，看看你的作品：

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

來源

2014-05-10 01:03:27 MSC

獲取Svg中字符串的像素長度

回答

相關問題