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

Question

我注意到Paper.text的边界框不等于文本的实际区域，但高度更高。我假设这是因为它正在查看字体中的某些信息，这些信息具有大字体（斜线）或位置非常高/低（过度）的字形空间 - 至少这是我的理论 - 但是{{{ 1}}身高和实际看起来仍然太大了。知道如何获得文本的实际“打印”大小？

以下是一些数字：

getBBox（）结果：

getBBox

SVG节点（来自path.node）

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

在屏幕上测量的实际尺寸/位置：

<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()似乎不是跨浏览器兼容的。使用Pauls的片段回答FF和Chrome显示差异结果。

Answer 1

当您查看高度时，是否考虑了边界框的Y位置？或者你在想它可能是高于文本基线的高度？

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

＆＃13;

＆＃13;

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;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;