search

mitxela / plotterfun

MIT License
326 stars 62 forks source link

Add button 'Copy SVG to clipboard' #12

Open svenhb opened 3 years ago

svenhb commented 3 years ago

It would be useful to copy the generated SVG to the clipboard instead of saving it, because pasting the SVG into the target program is much quicker...

This could be useful: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

svenhb commented 3 years ago

I also figured out, that the order of the attributes is important in function 'resetSVG()': 

Old:     mainpath.setAttributeNS(null, "style", "stroke-width: 2px; fill: none; stroke: " + (config.Inverted?"white":"black"))
New:     mainpath.setAttributeNS(null, "style", "stroke:" + (config.Inverted?"white":"black")+";stroke-width:0.2mm;fill:none;")

Otherwise I get '2px' as color name - strange. Some how a bug inside c# XElement.

My working code for copy to clipboard looks like this:

    function copytoclipboard(){
        const svgString = '<?xml version="1.0" standalone="no"?>\r\n'   //<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r\n'
        + (new XMLSerializer()).serializeToString(svg);

        navigator.clipboard.writeText(svgString);
    }
mitxela commented 3 years ago

Sure, I could add this.

It's suspicious if the style depends on the order. They're separate properties so I wouldn't have thought it would matter - unlike, for instance, CSS border, which is a shorthand for a bunch of border properties, so it's conceivable that setting a new border could overwrite an earlier, more specific border-color. But SVG stroke and stroke-width are separate.

What are you pasting the SVGs into?

svenhb commented 3 years ago

Yes it is really wired, I assume it depends on C# XElement, because i can't find a problem in my code ;-) I paste SVGs to my https://github.com/svenhb/GRBL-Plotter