Saturday, 9 November 2019

Rendered SVG image in browser: copy element names to clipboard

On this webpage: http://viz-js.com/ we see a graph being rendered from a text file.

If you hover the mouse over one of the graph elements, its label appears in a pop-up. ('start' in this example)

enter image description here

Question: Is there anyway to either make the label selectable or add some JavaScript to allow the text of the pop-up to be copied to the clipboard?

My implementation of this has long node names (up to 44 chars) that I'd like to be able to copy somehow.

Thanks.

Edit: Actions tried so far.

Using Chrome's 'inspect' option, I see that the nodes in the SVG appear to have the class name of 'node, so I tried the following JavaScript but it had no effect:

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

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

and I can't seem to use any CSS styling to affect the look of the graph.



from Rendered SVG image in browser: copy element names to clipboard

No comments:

Post a Comment