获取RaphaelJS中文本的实际边界框

Question

我注意到Paper.text的边界框并不等于文本的实际区域，但高度更高。我认为这是因为它正在查看字体中的某些信息，这些信息有可能是大的（斜杠）或位置非常高/低（overcores）的字形 - 至少这是我的理论 - 但是getBBox高度而实际仍然看起来太大了。任何想法如何我可以获得文本的实际“印刷”大小？

这里有一些数字：

getBBox（）结果：

height: 162.28235294117644 
width: 1113.1764705882351 
x: 13.411764705882433 
x2: 1126.5882352941176 
y: 13.411764705882351 
y2: 175.6941176470588 

SVG节点（从path.node）作为我的屏幕上测量

<text x="0" y="93.88235294117646" text-anchor="start" font-family="Franklin Gothic Demi Cond" font-size="107px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: &quot;Franklin Gothic Demi Cond&quot;; font-size: 107px;" transform="matrix(2.3865,0,0,1.3412,13.4118,-31.329)" stroke-width="0.4190289116994294"><tspan dy="37.491727941176464" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Hello World</tspan></text> 

实际尺寸/位置：

x: 30px 
y: 50px 
width: 1085px 
height: 97px 

当我使用Paper.print()事情没问题时 - 由于复杂字形的性能问题，我切换到Paper.text()。

编辑 - 最重要的是，它似乎getBBox是不是跨浏览器兼容。使用Pauls的片段answer FF和Chrome显示比较结果。

Answer 1

当你正在寻找的高度，你考虑到边框的Y位置？或者你是否认为这可能是文本基线以上的高度？

请记住，高度覆盖从最高上升到最低下降的距离。

var mytext = document.getElementById("mytext"); 
 
var myrect = document.getElementById("myrect"); 
 

 
var textBBox = mytext.getBBox(); 
 

 
myrect.x.baseVal.value = textBBox.x; 
 
myrect.y.baseVal.value = textBBox.y; 
 
myrect.width.baseVal.value = textBBox.width; 
 
myrect.height.baseVal.value = textBBox.height;

<svg width="550" height="200"> 
 
    <text id="mytext" 
 
      x="0" y="93.88235294117646" text-anchor="start" font-family="Franklin Gothic Demi Cond" font-size="107px" stroke="none" fill="black"><tspan dy="37.491727941176464" >Hell&#x1eb; &#x174;orld</tspan></text> 
 
    <rect id="myrect" fill="none" stroke="red" stroke-width="1"/> 
 
</svg>