Text 在呈现之前获取SVG中的文本宽度

我想在SVG中的文本周围放置一个矩形。 我知道文本的高度（

text

元素的

font size

属性）。但宽度取决于实际内容。使用

getBBox（）

或

getComputedTextLength（）

应该可以工作。但这仅在渲染后有效

---

有没有办法用另一种方式来说明这一点？例如，相对于其他值定义

x

和

width

属性？我在SVG规范中找不到类似的内容。

计算文本结束的位置可能需要与渲染本身实现的基本代码路径大致相同的代码路径-根据字体和样式遍历每个字符的宽度，等等。。。由于我不知道SVG标准定义了一种直接获取此信息的方法，而无需进行实际的完整渲染，因此在出现此类方法或其他人在此处报告此类方法之前，该方法应该是在进行实际渲染之前进行不可见的渲染

---

您可以在隐藏层（z索引、不透明度等）或可见视口外执行此操作，以实验中效果最好的为准。您只需要让浏览器进行渲染就可以找到答案，因此您可以进行不可见的渲染，然后使用

getComputedTextLength（）

我知道这很旧，但有一些想法：

如果您可以选择单间距字体，您可以通过简单的常量乘以字形计数来确定宽度

如果您必须使用比例字体，您可以找到一个平均字形大小，像使用单声道空间一样进行计算，并留下足够的填充。或者，您可以使用

text

元素

textLength

属性填充填充。如果仔细选择常数，结果不会很令人不快

编辑：正如matanster发现的那样

使用

getComputedTextLength（）

预先确定字形宽度，并构建查找表。缺点是它不考虑紧排，但如果缓存大小不是问题，您可以将glyph对宽度附加到此查找

---

除此之外，还要找到一些方法来进行服务器端渲染：

渲染后测量它有什么问题？@RobertLongson代码复杂性和视觉跳跃。我正在动态生成整个文档。应准备好所有对象，然后将其添加到文档中，然后进行渲染。渲染后计算时，我必须渲染未完成的对象，然后在渲染后更改它们。这将导致视觉跳跃。是否将代码添加到问题？是否尝试获取尚未插入文档的元素的bbox和文本长度？视觉跳跃很容易修复。使事物可见=“隐藏”，然后在完成后取消隐藏。@ErikDahlström我还没有任何代码。我还在寻找它。您是对的，我希望获取尚未插入文档的元素的bbox和/或文本长度。由于这是不可能的，我正在寻找一些解决办法。也许有属性值可以指定与任意其他元素的长度相关的长度。可以说这有点老套，不是吗？