Css 如何像普通HTML文本或任何其他文本编辑器一样用光标选择SVG/d3.js文本？

我正在使用d3.js绘制一个布局图，如下所示：

但是我发现复制和粘贴节点的标签非常困难。以上面的链接为例，我不能拖动文本来选择任何序列。我只能双击标签来选择某个字符序列

如果我试图选择带有特殊字符的文本，如

Mlle.Vaubois

，我只能选择

Mlle

或

Vaubois

，我无法选择整个字符串

Mlle.Vaubois

。（见下图）

此外，我不能在该字符串中选择任意字符序列。例如，我无法选择中间的两个字母：

ll

inside

Mlle.Vaubois

。选中第一个

l

后，高亮显示立即停止。（见下文：）

我只想能够选择任何我想要的序列，就像在浏览器中一样。例如，我可以从HTML文本中选择

rce La

：

Labeled Force Layout

，如下所示。然后我可以按我的意愿

Ctrl+C

和

Ctrl+V

此问题不仅仅针对d3.js，因为另一个更通用的SVG示例也存在此问题：

---

我不知道为什么SVG处理的文本选择与浏览器或任何主流文本编辑器中的普通HTML文本如此不同？如何解决？谢谢。

以下示例向所有“节点”（即

class=“node”

）添加了一个单击处理程序，该处理程序将选择节点中的所有文本

var nodes=document.querySelectorAll（“.node”）；
nodes.forEach（函数（elem）{
元素addEventListener（“单击”，nodeClickHandler）；
});
函数nodeClickHandler（evt）{
var selection=document.getSelection（）；
var range=selection.getRangeAt（0）；
range.selectNode（evt.target）；
}

沃布瓦小姐

SVG中的文本选择比HTML中的矩形块中的文本选择复杂得多。SVG字符可以通过任意旋转定位在任意位置。它们可以跟随路径，被剪裁、屏蔽和过滤。我怀疑浏览器在SVGs的文本选择中没有花太多的精力。你可以考虑点击一个节点。Hi @ PaulLeBeau如何通过手动创建一个选择来完成它。你的链接是关于如何用JS选择HTML文本。但是我需要选择SVG标签文本（在d3.js中）。我不知道怎么做？你可以通过双击来选择节点中的所有文本。谢谢。这段代码适用于静态svg，如您的示例中所示，但对于js中动态生成的svg（如我的示例中所示），我无法成功地使用它？