Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add button 'Copy SVG to clipboard' #12

Open
svenhb opened this issue Nov 17, 2020 · 3 comments
Open

Add button 'Copy SVG to clipboard' #12

svenhb opened this issue Nov 17, 2020 · 3 comments

Comments

@svenhb
Copy link

svenhb commented Nov 17, 2020

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
Copy link
Author

svenhb commented Nov 18, 2020

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
Copy link
Owner

mitxela commented Nov 18, 2020

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
Copy link
Author

svenhb commented Nov 18, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants