在渲染之前获取SVG中的文本宽度

Question

我想在SVG的文本周围放一个矩形。 我知道文本的高度（font-size元素的text属性）。但宽度取决于实际内容。使用getBBox()或getComputedTextLength()应该有效。但这仅在渲染后才有效。

有没有办法以其他方式指定？例如，相对于其他值定义x和width属性？我没有在SVG Spec中找到类似的东西。

Answer 1

确定文本结束的位置大概需要与渲染本身实现的大致相同的底层代码路径 - 根据字体和样式等来浏览每个字符的宽度......我不知道SVG标准定义了一个方法为了直接获取这些信息而不进行实际的完全渲染，直到这些方法出现或被其他人报告，方法应该是在进行实际渲染之前进行隐形渲染。

您可以在隐藏图层（z-index，opacity和stuff）中或在可见视口之外执行此操作，无论哪种方法在实验中效果最佳。你只需要让浏览器进行渲染就可以找到，所以你为此而无形地渲染，然后使用getComputedTextLength()

Answer 2

我知道这很老了，但是有一些想法：

1）如果可以选择等宽字体，则可以通过使用字形计数的简单常数乘法来知道宽度

2）如果绑定到比例字体，则可以找到平均字形大小，对等宽字符进行数学运算，并留出足够的填充。另外，您可以使用text元素textLength属性填充填充。如果仔细选择该常数，结果将不会很令人满意。