SVG path is not displayed properly while creating PDF using PhantomJS on Chromium / Safari

Question

I am creating a PDF using PhantomJS. My code is :

phantom.create(function(err, ph) {
        console.log("err,", err);
        if (!err) {
            ph.createPage(function(err, page) {
                page.settings = {
                    loadImages: true,
                    localToRemoteUrlAccessEnabled: true,
                    javascriptEnabled: true,
                    loadPlugins: false
                };
                var width = (parseFloat(propertyData.width) - 2) + propertyData.scaleUnit;
                var height = (parseFloat(propertyData.height) - 1) + propertyData.scaleUnit;
                // page.set('viewportSize', {
                //     width: width,
                //     height: height
                // });
                page.set('paperSize', {
                    width: width,
                    height: height,
                    border: '1cm',
                    margin: {
                        top: '50px',
                        left: '20px',
                        right: '20px',
                        bottom: '20px'
                    },
                    format: 'A4',
                    orientation: 'portrait',
                });
                template = '<svg id="space-bg-wrapper" class="svg-view" x="20%" y="175px" height="500" width="500" viewBox="0 0 792 612" style="stroke-opacity:0.2"> <g id="svg-bg-view" class="svg-view"> <g transform="translate(-0.96746826171875,-42.793792724609375)rotate(180,387.48394775390625,194.16751098632812)skewX(0)scale(1,1.0306836366653442)"> <path d="M182.50403600841202 80.38036978292318 L172.70506286621094 80.14508819580078 L172.70506286621094 114.00178527832031 L181.7335205078125 114.00178527832031 A4.343611657245171 4.343611657245171 0 0 1 185.92530822753906 118.51600646972656 A40.441789212785444 40.441789212785444 0 0 0 210.43109130859375 146.56869506835938 L252.34890747070312 158.1767120361328 A59.57813444575779 59.57813444575779 0 0 1 279.7566833496094 178.49072265625 A406.3642033922339 406.3642033922339 0 0 0 326.1887512207031 249.10610961914062 A32.97772024752448 32.97772024752448 0 0 0 352.3067626953125 263.6161193847656 L430.01593017578125 262.3263244628906 A114.28025350018537 114.28025350018537 0 0 0 474.4089660644531 252.00811767578125 L532.448974609375 226.5349884033203 L542.122314453125 221.37586975097656 L588.8768310546875 193.6456298828125 A133.6022573445588 133.6022573445588 0 0 1 608.009033203125 186.03514099121094 A8.782023371505137 8.782023371505137 0 0 1 618.3994750976562 197.51495361328125 A46.67013003017425 46.67013003017425 0 0 1 600.3425903320312 222.34320068359375 L478.775146484375 289.60009765625 A142.1379078281504 142.1379078281504 0 0 1 325.35864251852036 291.86439372375736 A102.52202434832462 102.52202434832462 0 0 1 302.2120666503906 267.98583984375 A969.0369374911932 969.0369374911932 0 0 1 269.0889587402344 207.3537139892578 A85.68694938991193 85.68694938991193 0 0 0 232.87342834472656 172.37100219726562 L189.541748046875 161.02517700195312 A32.988879133123916 32.988879133123916 0 0 1 166.66075134277344 143.63380432128906 A99.77487323751137 99.77487323751137 0 0 1 156.55538940429688 113.87913513183594 A243.7778168615004 243.7778168615004 0 0 1 155.8371124267578 84.31023406982422 A23.21498547957365 23.21498547957365 0 0 1 176.3285369873047 62.9766960144043 L181.3812255859375 62.9766960144043 A6.379072891303258 6.379072891303258 0 0 1 186.714599609375 70.27500915527344 L186.714599609375 76.73121643066406 A4.890656798052708 4.890656798052708 0 0 1 182.50404357910156 80.38037109375" stroke="#000" stroke-dasharray="0" stroke-width="1" marker-start="none" marker-end="none" flag="polygon" vector-effect="non-scaling-stroke" fill="#fff" class="" stroke-linecap="round" stroke-linejoin="round"></path> </g> </g> </svg>';

                page.set('content', template, function(error) {
                    if (error) {
                        console.log('Error setting content: ', error);
                        res.status('400').send("OK");
                    } else {
                        console.log("content has been set");
                    }
                });
                page.onLoadFinished = function(status) {
                    page.render("temp1.pdf", function(error) {
                        if (error) console.log('Error rendering PDF: %s', error);
                        else {
                            console.log("PDF GENERATED : ", status);
                            if (page) {
                                page.close();
                            }
                            setTimeout(function() {
                                ph.exit();
                                return callback(true);
                            }, 500);

                        }

                    });

                }
            });
        } else {
            console.log("error while creating page", err);
        }

    });

} catch (e) {
    console.log("Error in renderPDF ", e);
}

The PDF is generated successfully but doesn't display properly on Chromium and Safari browser. Attached are sample images. PDF is shown Chromium:

PDF is shown Firefox:

Answer 1

The path's attributes should be in a specific order to create/display the pdf on "safari/chromium" browser without any error. By changing the order in required format will resolve the issue and will create the pdf successfully. You can refer following link path Vector link for the reference.