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

Question

我注意到Paper.text 的边界框不等于文本的实际面积，但高度更大。我认为这是因为它正在查看字体中的一些信息，这些信息有空间容纳大（斜杠）或位置非常高/低（超线）的字形 - 至少这是我的理论 - 但是 @987654324 之间的区别@height 和实际看起来还是太大了。知道如何获得文本的实际“打印”大小吗？

这里有一些数字：

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 的 sn-p 回答 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>