Javascript 浏览器中呈现的SVG图像：将元素名称复制到剪贴板

在这个网页上：我们看到一个从文本文件中呈现的图形

如果将鼠标悬停在其中一个图形元素上，其标签将显示在弹出窗口中。（“开始”在本例中）

问题：是否可以选择标签或添加一些JavaScript以允许将弹出窗口的文本复制到剪贴板？

我的实现有很长的节点名（最多44个字符），我希望能够以某种方式进行复制

谢谢

编辑：迄今为止已尝试的操作。

使用Chrome的“inspect”选项，我看到SVG中的节点似乎具有“node”的类名，因此我尝试了以下JavaScript，但没有效果：

$('.big').hover(function () {
    // will not work, no user action
  $('input').select();
    document.execCommand('copy');
});

$('.big').mousedown(function () {
    //works
  document.execCommand('copy');
});

---

我似乎无法使用任何CSS样式来影响图形的外观。

查看SVG，您可以看到悬停卡的文本来自每个形状各自组的

DOM元素。您可以通过编辑DOM和修改其中一个标题来判断：当您将鼠标悬停在形状上时，您将看到一个新文本

所以，我们只需要从那里抓取文本，然后

编辑：现在运行起来应该容易多了。它只需等待SVG的

g.graph

元素加载到页面，而不是每次呈现

（函数addListener（）{
//这次，将侦听器添加到图形本身
document.querySelector（'.graph'）.addEventListener（'click'，event=>{
让str=“”
//抓取实际单击的元素的所有同级
for（event.target.parentElement.children的常量同级）{
//检查他们是否是标题
如果（sibling.nodeName！=“title”）继续；
str=sibling.innerHTML；
打破
}
const ta=document.createElement（'textarea'）；
ta.value=str；
ta.setAttribute（'readonly'，''）；
style={position:'absolute'，left:'-9999px'}；
文件.正文.附件（ta）；
ta.select（）；
document.execCommand（'copy'）；
文件.body.removeChild（ta）；
if（str==“”）console.log（'Nothing found to copy！'）；
else console.log（`“${str}”已复制到剪贴板！`）；
});
})();

如果你想把它放在页面的源代码中，而不是粘贴到Chrome控制台上，那么就去掉函数声明，把它从括号中去掉。当加载其所在的文件时，它将突出运行

---

原始解决方案：

//函数包装在括号中，并在声明后立即调用
//（以便可以从Chrome控制台运行）：
（函数addListeners（）{
//抓取“图形”组中的每个SVG“组”：
for（document.querySelectorAll（'.graph g'）的常数）{
//告诉每个小组听一下自己的点击：
el.addEventListener（'单击'，事件=>{
//创建一个空字符串变量来存储标题
设str=“”；
//在组中的所有元素中循环一个名为“title”的元素
for（el.children的const child）{
如果（child.nodeName！=“title”）继续；
//存储该标题
str=child.innerHTML；
}
//将字符串复制到剪贴板（请参见上面的链接）
const ta=document.createElement（'textarea'）；
ta.value=str；
ta.setAttribute（'readonly'，''）；
style={position:'absolute'，left:'-9999px'}；
文件.正文.附件（ta）；
ta.select（）；
document.execCommand（'copy'）；
文件.body.removeChild（ta）；
log（`“${str}”已复制到剪贴板！`）；
});
}
})();

---

我在你链接的页面的Chrome开发控制台中测试了这个功能，效果很好。

谢谢Matthew。我可能要到星期一回来工作时才能测试这个。我无法让它工作-我将你的代码添加到我自己页面的部分，还试图保存Viz js页面的源代码并将其添加到该部分，但根本没有呈现。你是如何在Viz-js.com页面上尝试的？（对不起，对JavaScript来说是个新概念）。我将代码块复制到了Chrome开发者工具的控制台选项卡中。他们的网站似乎使用了一些时髦的导入，这使得本地保存变得很困难。请注意，这是通过向SVG中的所有组添加侦听器来实现的——这意味着如果在SVG组出现之前运行此函数，它们将无法添加侦听器。让我看看是否可以将其修改为图形元素上的单个事件侦听器。。。我还在代码中添加了一些注释。好主意。然而，这将创建大量的

textarea

s。也许创建一个隐藏在html中的输入类型并在单击时重置其值会更好option@enxaneta对。我认为简单地将

ta

的声明移动到事件侦听器之外，确保只创建一个，可能是最快的修复方法。