为什么 svg 文本无法选择？答案

【问题标题】：Why svg text is unselectable?为什么 svg 文本无法选择？
【发布时间】：2018-10-24 18:19:02
【问题描述】：

我正在尝试在 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，它是不可选择的，我想背景上的文字会阻止当前的文字选择：

【问题讨论】：

它对我来说是可选的，尽管如果 opacity:0 你看不到它被选中。如果这是问题，请尝试 fill:rgba(255,0,0,0) 而不是 opacity:0
@enxaneta 不透明度很好，在单击元素之前工具提示是不可见的。但是当点击并可见时 - 问题出现了，我已经在几个浏览器中尝试过。

标签： javascript d3.js svg

【解决方案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>

【讨论】：

谢谢你的回答，我至少找到了问题的原因——svg 甚至 html 都很好——在 html 查看器中它是可选的。但是在我的程序中它是react应用程序，所以它弄清楚了-react阻止了选择，仍然不知道如何修复它，但是找到了原因。