检测 svg 路径和 svg 文本之间的冲突

Question

假设我有一个 svg 路径和一段文本。我想弄清楚它们相交的地方。我不确定从哪里开始，因为 svg 路径的 getBBox() 函数没有帮助。

我应该从哪里开始？

Answer 1

您通过getBBox() 获得了文本边界框。不幸的是，您可能已经发现，这不是字形的紧密边界框。它包括字体的完整下降高度和上升高度。但是，它应该为您提供一个合理的近似值。

下一步是确定路径与边界框的位置。获得完美的数学解决方案非常困难，但有一些迭代方法更容易并能提供良好的结果。

路径元素有一个 couple of DOM functions 可以提供帮助：getTotalLength() 和 getPointAtLength()。您可以沿着从 0 到路径长度的路径，调用 getPointAtLength()，直到返回的点位于文本 bbox 内。

如果您想获得更准确的信息并确定文本中的哪个字符触及线，有一些DOM functions on SVG text elements 应该很有用。例如，`getExtentOfChar(n) 返回文本中第 n 个字符的边界。