html - 减少 svg 文本的区域

Question

我目前正在使用内部开发的库创建词云，它使用 svg 元素 text 来显示单词，我遇到的问题是某些单词的区域有时会与其他单词重叠如果您检查此 jsfiddle 中的 test1，您可以看到这些词，如果文字必须是可点击的，这就会成为一个问题。

我想知道是否可以将文本的区域减少到最小，只是将单词包裹起来，接受一个小的填充。

我已经尝试过 this 中发布的解决方案回答但没有用。

我更喜欢 css 解决方案，如果它存在而不是乱用 svg，但如果没有其他选择的话。

编辑:好的，足够的声誉来发布图像。我目前拥有的:

我想要的东西:

Answer 1

有两个问题；我目前只有一个解决方案。您的文字示例具有误导性。尝试使用 Text1g 来查看下降(即 g 需要的基线以下的空间量)。如果您这样做，那么您会发现文本确实重叠了 - 您只是没有注意到，因为您的测试文本不包含一组好的测试字符。

除此之外，我看到该元素是 67px 高，而 font-size 只有 60px。 我没看到额外的 7 个像素来自哪里。它不是填充也不是边距:-/