如何獲得svg文本元素的緊密邊界？

Question

我需要svg文本元素的「緊」邊界。當我使用getBBox時，我得到的高度似乎包含字體的完全可能的字形高度，而不考慮文本中的特定字符。我得到的寬度因瀏覽器而異，但通常包含的字符數比字符實際佔用的長度要多。有沒有什麼辦法可以得到一個只包含我文字中字符的盒子？例如，我想要下面創建的矩形緊緊地包裹文本'.....'但是，在由getBBox返回的邊界框中有很多'剩餘'垂直空間。謝謝你的幫助。這是我的第一篇文章StackOverflow，所以我也歡迎格式/問題的演講評論。

<svg width="400" height="400"> 
     <text>.....</text> 
     <rect style="fill:none;stroke:rgb(0,100,100);stroke-width:1"/> 
</svg> 

<script type="text/javascript"> 
    var layout = function() { 
     var numB = $("text").get(0).getBBox(); 
     $("rect").attr("x", 0); 
     $("rect").attr("y", 0); 
     $("rect").attr("width", numB.width); 
     $("rect").attr("height", numB.height); 
     $("text").attr("y", numB.height); 
    } 

    document.onreadystatechange = function() { 
     if (document.readyState == "complete") { 
      layout(); 
     } 
    } 
</script> 

Answer 1

對於任何碰到這個問題的人，我終於可以得到我想要的這個工具：Font.js.我已經能夠在Verdana中獲得單個字符和字符串的像素完美邊界。

Answer 2

你的問題是現場的，但答案並不容易。

如果您使用的是SVG字體，則可以訪問字體文件中的指標。它將具有下行，上行，基線和xheight等指標。所以你可以檢查你的字符串是否有任何下行（jgqp等），大寫字母等。這仍然是棘手的，並不完全準確。

您可以嘗試的第二件事情是在畫布中呈現相同的文本並檢查尺寸。我不知道如何做到這一點，它不應該太複雜。