Javascript 获取SVG文本元素的特定word on click事件

在中，我通过d3.js在SVG文本元素中触发onClick事件，以基于文本内容进行搜索。见以下摘录：

gnode.append("text")
    .attr("x", 14)
    .attr("y", ".31em")
    .text(function(d) {
      return d.Title;
    })
    .on("click", function(d) {
      if (d3.event.defaultPrevented) return;
      clickedNode = d;
      var words = d.Title.toLowerCase().split(" ").filter(function(w) {
        return w != keyword;
      });
      console.log(words);
      updateNodes(words[Math.floor(Math.random() * words.length)]);
    });

在上面的代码中，我实际上不知道点击了什么单词——我只是使用一个reference键，然后随机选择另一个。实际上，我想做的是获取单击的特定单词，并将其用作听众的输入

我的问题如下：

给定一个SVG文本元素，我如何确定在元素中单击以在事件中使用的单词？

---

ps：使用常规HTML有很多方法可以做到这一点，比如提供的方法。除了生成一堆离散元素并将它们与g元素偏移之外，我不知道如何在不使用封闭元素的情况下捕获特定单词。我相信jQuery也不会让我在SVG中这样做。

我几乎可以肯定，单击文本元素是原子的。但是，你应该能够使用一个。为每个单词创建一个，将事件处理程序挂起或挂在父文本节点上，并使用事件委派。另外，您可以单独设置每个单词的样式，使它们看起来可以单击

---

我还没有尝试过这个方法，应该可以，如果不行请告诉我。

html方法有什么问题？如果你不想使用单独的元素，你必须获得单击的位置并确定到每个单词的距离以选择最接近的一个。Robert，据我所知，通过html没有好的方法，缺少将所有内容包装在span标记中—这与SVG不太兼容。我的第一个想法是在文本元素offset中添加单个单词，以模拟它们在同一行中，但这似乎太复杂了。