时间戳

首页 > 解决方案 > 为什么 svg 文本无法选择？

javascript - 为什么 svg 文本无法选择？

问题描述

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

标签： javascriptd3.jssvg

解决方案

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>

推荐阅读