为什么SVG文本无法选择？

Question

I'm trying to make selectable tooltip in D3.js

here is code:

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)

And in browser as a result I have following element (I have no any css for it either):

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

And the problem is that this text is unselectable, through pointer changes on text hovering.

So how to make this text element selectable by mouse?

If it makes sense - whole svg picture is here - you can see word SPICE on the top left, it's unselectable, I suppose text on the background prevents current text selection:

Answer 1

I have no problem selecting this text, but the location of the g is probably inside a translated g .

Do you have some kind of overlay on the graph?

Make a very simple example like this.

 <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>