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

Question

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

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

Answer 1

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

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

Answer 2

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

1）如果你可以选择单倍间距字体，你可以通过一个简单的常数乘法和字形数来知道你的宽度

2）如果您使用比例字体，您可以找到平均字形大小，使用单声道空间进行数学计算，并留下足够的填充。或者，您可以使用text元素textLength属性填充填充。如果仔细选择常数，结果不会很令人不愉快。