减少svg文本的区域

Question

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

我想知道是否可以将文本的面积减少到最小，只是包装单词，接受一个小的填充。

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

我更喜欢css解决方案，如果它存在而不是搞乱svg，但是如果没有其他选项可以做。

编辑：好的，有足够的声誉来发布图片。我目前有什么：

我想拥有什么：

Answer 1

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

除此之外，我发现该元素为67px高而font-size仅为60px.我看不到其他7个像素的来源。它不是填充而不是边距： - /

Answer 2

为什么你需要知道最小边界框？

如果是因为您要链接该元素，或将点击事件应用于这些字词，那么您应该调查pointer-events属性。

您可能需要以下内容：

<text ... pointer-events="fill">ejecutar</text>

当指针超过单词填充时，您将只获取事件。点击这可能有点繁琐，因为单词中的漏洞不可点击。

您可以通过<rect>在单词前面放置一个不合适的pointer-events="fill"大小来缓解这种情况。 ＆＃34;填充＆＃34;即使它是不可见的，值也会吸引填充的事件。但是，这需要你知道我们已经建立的单词的bbox，你没有（？）。

你可以给单词一个看不见的胖中风并使用pointer-events="all"。不可见的笔划会使可点击区域（不可见）更胖，因此字间孔更小。