Question

我目前正在试图弄清楚SVG.js如何从SVG文本对象计算出校正后的边界框x，y坐标（左上角）。

我的SVG对象如下所示：

.*

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

我认为这是基于字体的？如果是这样的话，该如何从字体文件中提取该信息？

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

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

Answer 1

简单的答案是：我们使用浏览器api获取边界框（{{1}}）。我们的el.getBBox()方法只是围绕它的简单包装。对于文本，我们不计算任何更正的边界框。在移动文本时会涉及一些魔术，因为文本通常是按基线移动的，但是我们统一了api，以便所有形状都通过其左上角移动。

如果您想知道浏览器如何计算文本的边界框，可以查看以下答案：reproduce Bounding Box of text in Browsers

TL：DR您得到的数字因浏览器而异。而且，您需要字体文件

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

1 个答案: