CODEWITHSUNDEEP
javascriptsvgonclick
CDA the Programmer
CDA the Programmer

Reputation: 107

Retrieve Dynamically-Created SVG Element

I have a form section where a user can enter in data and then a chart is created based off of the data. I want the user to be able to copy the SVG of the chart to the clipboard so that they can then paste the chart in another field on the form, but I'm unsure of how to retrieve what I need as the SVG is dynamically created. Below is the button that, when clicked, is intended to copy the SVG to the clipboard.

<div style="float: right;" class="printnoshow">
    <input type="button" class="formbutton" value="Copy" onclick="copyImg(); $('.formsmodalmask').hide(); $('.pmonitormodal').hide(); $('.pmonitordescriptiondiv').css('page-break-after', 'auto');" />
</div>

When clicked the JavaScript function copyImg() is intended to retrieve the SVG. I have an outline below, but am unsure of where to go with this. 

function copyImg() {
    var svg = document.getElementById('svg');
    console.log(svg);

    var range = document.createRange();
    range.selectNodeContents(svg);

    window.getSelection().addRange(range);

    var success = document.execCommand('copy');
    if (success)
        console.log('Successfully copied to clipboard');
    else
        console.log('Unable to copy to clipboard');

    window.getSelection().removeRange(range);
}

So the SVG is the chart below and you can see the Copy button on the form as well. Any help here would be appreciated. Thanks![enter image description here]1

Upvotes: 0

Views: 398

Answers (3)

CDA the Programmer
CDA the Programmer

Reputation: 107

enter image description here

The first line shows console.log(svg) and the rest is console.dir(svg), which shows all of the properties shown plus many more below those. enter image description here

Upvotes: 0

KingKabyle
KingKabyle

Reputation: 381

The first answer 100% correct but it will copy the svg as raw text to the clipboard. If you search for a solution where you really save the svg as an Image. You need to use html2canvas.min.js as an extrenal src. Like this:

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.3/html2canvas.min.js"></script>

And and the script:

svg = document.querySelector('svg');
svg.onclick = () => {
html2canvas(svg).then(function(canvas) {
                canvas.toBlob(function(blob) {
                        navigator.clipboard
                                .write([
                                new ClipboardItem(
                                        Object.defineProperty({}, blob.type, {
                                                value: blob,
                                                enumerable: true
                                        })
                                )
                        ])
                });
        });
}

This will copy the svg as an image so you can paste it everywhere. So after that you are able to paste it into MS Word etc. And of course you can wrapt it into a function to use the code if you have some async stuff (after creating the svg). PS: Maybe you need to edit the css selector

Upvotes: 1

Andre Nuechter
Andre Nuechter

Reputation: 2253

In my opinion the easiest way to get at the markup of a dynamically created svg is to read its outerHTML attribute. This gives you a string which you can easily copy to the clipboard.

The following snippet illustrates a way to do that (a click on the svg copies its markup to the clipboard):

const svg = document.getElementById('svg');

svg.onclick = () => window.navigator.clipboard.writeText(svg.outerHTML);
svg {
  background: lightgrey;
}
<svg id="svg" width="100" height="100" viewBox="0 0 100 100">
  <rect x="0" y="0" width="10" height="10" />
  <rect x="90" y="90" width="10" height="10" />
</svg>

Upvotes: 0

Related Questions