Convert Svg To Image In Png

i am converting angular nvd3 chart to svg using html2canvas and canvg plugings but when i convert pie chart to png then i looks same as chart but when i convert line chart or area

Solution 1:

Your svg elements are being styled by the external stylesheet nv.d3.min.css .

canvg seems unable to access external style sheets, so you need to append it directly in your svg node.

To do so, if your style sheet is hosted on the same domain as your scripts, you can do something like :

var sheets = document.styleSheets;
var styleStr = '';
Array.prototype.forEach.call(sheets, function(sheet){
    try{ // we need a try-catch block for external stylesheets that could be there...
        styleStr += Array.prototype.reduce.call(sheet.cssRules, function(a, b){
            return a + b.cssText; // just concatenate all our cssRules' text
            }, "");
        }
    catch(e){console.log(e);}
});
// create our svg nodes that will hold all these rulesvar defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
style.innerHTML = styleStr;
defs.appendChild(style);
// now append it in your svg node
thesvg[0].insertBefore(defs, thesvg[0].firstElementChild);

So now you can call the XMLSerializer, and canvg will be happy. _{(note that this is not only a canvg limitation, the same applies for every way to draw an svg on a canvas).}

Forked plunkr, where I copied the nv.d3.min.css's content to a same-originstyle.css.

Solution 2:

Very late to the conversation but I just wanted to add that the solution as described by Kaiido, put very simply, is to embed the styles into the SVG document directly.

In order to do this, you manipulate the DOM to make the SVG element look like this:

<svgxmlns="http://www.w3.org/2000/svg"width="200"height="100"version="1.1"><defs><style>.rectangleStyle{
           width:200px;
           height:100px;
           stroke:black;
           stroke-width: 6;
           fill: green;
       }       
     </style></defs><rectclass="rectangleStyle"/></svg>