为什么SVG文本无法选择？

Question

我正在尝试在D3.js中提供可选的工具提示

这是代码：

var tooltip = obj.svg
  .append('g')
  .append('text')
  .attr("id", "tooltip")
  .text( "SPICE")
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "red")
  .style("opacity", .0);

...

.on("click", function (d) {
        d3.selectAll("#tooltip").transition()
        .style("opacity", (obj.tooltipVisible && obj.tooltipId === d.id) ? 0.0 : 1)

因此，在浏览器中，我有以下元素（我也没有任何CSS）：

<g><text id="tooltip" font-family="sans-serif" font-size="20px" fill="red" x="35" y="11.538461538490488" style="opacity: 1;">SPICE</text></g>

问题是，通过悬停文本时指针的更改，此文本是不可选择的。

那么如何通过鼠标选择该文本元素？

如果有道理-整个svg图片在这里-您可以在左上角看到SPICE字，它是不可选择的，我想背景上的文本会阻止当前的文本选择：

Answer 1

我选择该文本没有问题，但是g的位置可能在翻译后的g内部。

图形上是否有某种叠加层？

举一个非常简单的例子，

<svg width="200" height="200">
<g><text id="tooltip" font-family="sans-serif" font-size="20px" fill="red" x="35" y="11.538461538490488" style="opacity: 1;">SPICE</text></g>
</svg>