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

Question

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

我应该从哪里开始？

Answer 1

您有getBBox()的文字边界框。不幸的是，正如您可能已经发现的那样，这不是字形的紧边界框。它包括字体的完整下行和上升高度。但是它应该给你一个合理的近似值。

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

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

如果您想更准确地确定文本中的哪个字符接触该行，则有一些DOM functions on SVG text elements应该是有用的。例如，`getExtentOfChar（n）返回文本中第n个字符的边界。