我目前正在使用内部开发的库创建一个词云，它使用 svg 元素text 来显示单词，我遇到的问题是某些单词的区域有时会与其他单词重叠，如您所见如果你检查这个jsfiddle 中的test1，如果这些词必须是可点击的，这就会成为一个问题。
我想知道是否可以将文本的区域缩小到最小，只是换行，接受一个小的填充。
我已经尝试了this 答案中发布的解决方案，但没有奏效。
如果它存在，我更喜欢css解决方案，而不是弄乱svg，但如果没有其他选项可以做到。
编辑：好的，足够的声誉可以发布图片。我目前拥有的：
我想要什么：
【问题讨论】：
有两个问题；我目前只有一个解决方案。您的文字示例具有误导性。尝试Text1g 来查看下降（即g 需要的基线下方的空间量）。如果您这样做，那么您会看到文本确实重叠 - 您只是没有注意到，因为您的测试文本不包含一组好的测试字符。
除此之外，我看到元素是 67px 高，而 font-size 只是 60px. 我看不到额外的 7 个像素来自哪里。它不是填充，也不是边距：-/
【讨论】：
为什么需要知道最小边界框？
如果是因为您正在与元素链接，或者将点击事件应用于单词，那么您应该调查pointer-events 属性。
你可能想要这样的东西：
<text ... pointer-events="fill">ejecutar</text>
只有当指针超过单词填充时，您才会收到事件。不过，这对于点击可能有点繁琐，因为单词中的孔将无法点击。
您可以通过在带有pointer-events="fill" 的单词前面放置一个适当大小的不可见<rect> 来缓解这种情况。 “填充”值将吸引填充位置的事件，即使它是不可见的。但是，这需要您知道单词的 bbox，而我们已经确定您没有 (?)。
你可以给这些词加上一个看不见的粗笔画，然后使用pointer-events="all"。不可见的笔画会使可点击区域（不可见）更胖，因此字间距更小。
【讨论】：