Почему текст 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>