gpt4 book ai didi

javascript - 在浏览器中渲染 SVG 图像 : copy element names to clipboard

转载 作者:行者123 更新时间:2023-12-04 19:25:26 25 4
gpt4 key购买 nike

在这个网页上:http://viz-js.com/我们看到从文本文件呈现的图形。

如果将鼠标悬停在其中一个图形元素上,其标签将出现在弹出窗口中。 (本例中的“开始”)

enter image description here

问题:是否有使标签可选或添加一些 JavaScript 以允许将弹出窗口的文本复制到剪贴板的方法?

我的实现有很长的节点名称(最多 44 个字符),我希望能够以某种方式复制。

谢谢。

编辑:到目前为止尝试的操作。

使用 Chrome 的“检查”选项,我看到 SVG 中的节点似乎具有“节点”的类名,所以我尝试了以下 JavaScript,但没有效果:

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

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

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

最佳答案

查看 SVG,您可以看到悬停卡片的文本来自 <title>每个形状各自组的 DOM 元素。您可以通过编辑 DOM 并修改其中一个标题来判断:当您将鼠标悬停在形状上时,您会看到一个新文本。

所以,我们只需要从那里获取文本和send it to the clipboard .

编辑:这现在应该更容易运行。它只需要等到 g.graph SVG 的元素被加载到页面,而不是每次渲染时。

(function addListener() {
// This time, add the listener to the graph itself
document.querySelector('.graph').addEventListener('click', event => {
let str = ""
// Grab all the siblings of the element that was actually clicked on
for (const sibling of event.target.parentElement.children) {
// Check if they're the title
if (sibling.nodeName != 'title') continue;
str = sibling.innerHTML;
break;
}

const ta = document.createElement('textarea');
ta.value = str;
ta.setAttribute('readonly', '');
ta.style = { position: 'absolute', left: '-9999px' };
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);

if (str == "") console.log('Nothing found to copy!');
else console.log(`"${str}" copied to clipboard!`);
});
})();

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

原解决方案:

// Function wrapped in brackets and called immediately after declaration
// (so that it can be run from the Chrome console):
(function addListeners() {
// Grab every SVG 'group' in the 'graph' group:
for (const el of document.querySelectorAll('.graph g')) {
// Tell each group to listen for a click on itself:
el.addEventListener('click', event => {
// Create an empty string variable to store the title in
let str = "";
// Loop through all the elements in the group for one called 'title'
for (const child of el.children) {
if (child.nodeName != 'title') continue;
// Store that title
str = child.innerHTML;
}

// Copy the string to the clipboard (see link above)
const ta = document.createElement('textarea');
ta.value = str;
ta.setAttribute('readonly', '');
ta.style = { position: 'absolute', left: '-9999px' };
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);

console.log(`"${str}" copied to clipboard!`);
});
}
})();

我在您链接的页面的 Chrome 开发控制台中对此进行了测试,它工作正常。

关于javascript - 在浏览器中渲染 SVG 图像 : copy element names to clipboard,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58728093/

25 4 0