Black background added to paths

[infinitemind2]

Describe the bug
A clear and concise description of what the bug is.
What version are you using (exact version of svg2pdf.js and jspdf)?

jspdf - 2.5.1
svg2pad - 2.2.1

To Reproduce
Steps to reproduce the behavior:

1. With the following SVG code from produced page

2013-01-012013-01-022013-01-032013-01-042013-01-052013-01-06050100150200250300350400450500550data1data2data3data4

2. I get this result

E.g. provide a link to the online playground.

Expected behavior
I would have expected the PDF to look like so.

Extra line placed with a black background, can I just add a path specification in the css to remove?

This is in accordance to the following SVG spec

Desktop (please complete the following information):

• OS: Windows 10 21H2
• Browser: chrome
• Version: 108.0.5359.72

Additional context
Add any other context about the problem here.

[yGuy]

I wouldn't exactly call this SVG code:

With the following SVG code from produced page
2013-01-012013-01-022013-01-032013-01-042013-01-052013-01-06050100150200250300350400450500550data1data2data3data4

We need a proper repro, here.

[infinitemind2]

Fixed the problem by including the css file contents into the defs section of the svg. the file above is the fixed version and works a treat now.

Sometimes I just need a prod and a nights sleep to figure things out.

Thanks

[infinitemind2]

the svg code works in your playground.
However when I run through my code, no luck. Does not seem to recognise the new css in the CDATA section

`
function SavePDFFile(props, width, height) {

            var svg = document.getElementById("reportbox").children[0];

            svg.getBoundingClientRect() // force layout calculation
            const w = svg.width.baseVal.value
            const h = svg.height.baseVal.value
    
            svg.setAttribute('viewBox','0 0 '+ w +' '+ h);
            svg.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink');
            svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
    
            $.get('/app-data/graphcss.txt', function (resp) {
                // resp now should contain your CSS file content.
                var def = Object.assign(document.createElement('style'), {textContent: resp});
                def.setAttribute('type','text/css');

                svg.children[0].prepend(def);
                
                const doc = new jspdf.jsPDF(w > h ? 'l' : 'p', 'pt', [w, h])
          
                doc.svg(svg, { w, h }).then(function(pdf) {
                        // Save the PDF
                        pdf.save('document-svg.pdf');
                        
                });
            });
    }

`

[yGuy]

Your code does not seem to wait for the CSS to actually load. Creating the style element will not synchronously load and apply the CSS. Please come up with a minimal executable repro if you think this is an issue with svg2pdf. From the code above, I think the issue is a timing issue with the CSS loading.

[infinitemind2]

How do you wait for CSS to load. Just putting together a basic page with the graph.

[infinitemind2]

This produces the same results as above
graphcss.txt
graphdemo.html.txt

[yGuy]

Works for me: https://jsfiddle.net/o6sv8bdh/

Please modify the fiddle and strip it down if you're still having problems.

You will get a lot more help on GitHub if you come up with minimal repros. Typically most people do not want to wade through tons of unrelated sources and your requests will be ignored instead. Thanks.

[infinitemind2]

Sebastian,

Thanks for your help.
The fiddle you set up works, noticed that you removed the CDATA tags from the css insertion into the svg element (which I thought was required). Did the same and all worked perfectly as expected within my page.

David