Javascript SVG文本命中测试

我正在尝试使用客户端JavaScript实现SVG文本元素的冲突检测。命中测试应该检查一个文本的任何字形是否与另一个文本元素的任何字形重叠。由于

getBBox

和

getextendtofchar

不准确，我需要一个自定义解决方案

我的第一种方法是获取元素的每个坐标/像素的颜色，并手动执行命中测试，但这不起作用，因为无法获取坐标的颜色。这将需要一个额外的画布来获得像素颜色->糟糕的解决办法

现在我正在考虑将文本或图示符转换为多边形以进行命中测试。可能吗？或者有没有其他的基于字形的命中测试方法

---

对于基于像素的点击测试，请致以最诚挚的问候

——如果您切换到HTML5画布，那么这将成为可能。有几个项目提供了从SVG到画布的简单转换，例如

---

至于基于多边形的方法——可能，但困难。可以使用某种工具（例如Inkscape的文本到路径）将文本或图示符转换为多边形（路径）。然后是计算。为任何文本制定一个通用的解决方案都需要大量的工作。但是，如果文本没有更改，那么使用路径手动绘制文本可能是一个快速而肮脏的解决方案。

您真的进入了一个痛苦和跨浏览器问题的世界。最后，我对字体进行了自定义路径渲染，以获得可靠且一致的总文本长度。我甚至不想考虑雕文打击

例如，一个问题是firefox（至少3.6版）和iirc（某些版本的opera）在缩放时存在舍入错误，因此当您缩放包含文本的父元素并按该比例的倒数缩放文本时，字母间距将与没有任何缩放时略有不同。（因为每个字母都必须以偶数或类似的数字开头，所以问题可以通过用上标和下标乘以10000来解决，但那是另一回事了）

不幸的是，与文本相比，使用路径对性能的影响非常明显。如果画布执行任何形式的动画平移或缩放，则应在动画期间切换到纯文本元素，并且在静态后，启用路径渲染以确保准确性

将svg字体转换为路径非常简单，它是纯文本，并且使用与路径元素完全相同的格式。（不过要注意字体嵌入许可证！还要记住文件大小，因为您无法使用用户系统中的字体，）