从 SVG 文本对象的坐标计算边界框坐标

Question

我目前正在尝试弄清楚 SVG.js 如何根据 SVG 文本对象计算更正后的边界框 x、y 坐标（左上角）。

我的 SVG 对象如下所示：

<svg  xmlns="http://www.w3.org/2000/svg" width="266" height="59" viewBox="0 0 266 59">
  <text id="TText" data-name="TText" fill="#707070" font-size="50" font-family="Boogaloo"><tspan x="0" y="0">TText</tspan></text>
</svg>

如果我将此代码添加到 SVG.js 中，则该位置在 y 方向偏移 11 个像素（考虑到 SVG 基于基线，我假设这是该位置）。有人可以解释如何计算边界框 x 和 y 坐标。我试图通过挖掘 SVG.js 存储库来解决它，但我自己无法解决它。

我会假设这是基于字体？如果是这种情况，如何从字体文件中提取该信息？

这是我的 SVG.js 代码，它显示了更正后的 X、Y 边界框坐标。

var draw = SVG().addTo('body');
var text = draw.text('TText');
text.font({
  family: 'Boogaloo',
  size: 50,
});
console.log(text.bbox());

Answer 1

简单的答案是：我们使用浏览器api来获取边界框（el.getBBox()）。我们的 bbox() 方法只是一个简单的包装器。在文本的情况下，我们不计算任何更正的边界框。我们在移动文本时使用了一些魔法，因为文本通常按其基线移动，但我们统一了 api，以便所有形状都按其左上角移动。

如果你想知道浏览器如何计算文本的边界框，你可以看看这个答案：

TL:DR 您获得的数字因浏览器而异。当然你需要字体文件

从 SVG 文本对象的坐标计算边界框坐标

Calculate bounding box coordinates from the coordinates of an SVG text object

javascript

svg

2d

bounding-box

svg.js