exupero / saveSvgAsPng

Save SVGs as PNGs from the browser.
MIT License
1.09k stars 362 forks source link

Chart style doesn't apply #214

Closed oncleguigs closed 5 years ago

oncleguigs commented 5 years ago

Hi, first of all thank you for this library, it's a great work!

I built a dashboard in nodeJS and EJS displaying some graphs using the NvD3 library. I don't know why but when I download the chart points are converted into big black dots.

I'm quite new to JS so there might be something wrong with my code...

The output on the dashboard:

image

The downloaded file.png:

plot (11)

The code for the graph:


    var chart = nv.models.scatterChart()
                  .showDistX(true)    //showDist, when true, will display those little distribution lines on the axis.
                  .showDistY(true)
                  .color(d3.scale.category10().range());

    //Configure how the tooltip looks.
    chart.tooltipContent(function(key) {
        return '<h3>' + key + '</h3>';
    });

    //Axis settings
    chart.xAxis.tickFormat(d3.format('.02f'));
    chart.yAxis.tickFormat(d3.format('.02f'));
    chart.xAxis.axisLabel(x_axis.replace(/_/g, ' '));
    chart.yAxis.axisLabel(y_axis.replace(/_/g, ' '));

    d3.select('#chart_' + chart_id + ' svg')
        .datum(data)
        .call(chart)
        .style({ 'width': 600, 'height': 600 })
        .append("text")
        .attr("x", 300)
        .attr("y", -6)
        .attr("text-anchor", "middle")
        .text(title);
    nv.utils.windowResize(chart.update);
    return chart;
  });

d = document.getElementById(svg_idd)
    saveSvgAsPng(d, "plot.png", {'backgroundColor':'white'});
exupero commented 5 years ago

I'm not familiar with NvD3, but I'm guessing that the chart's CSS styles have a selector that doesn't match against the SVG. See the readme for hooks to transform CSS selectors, and if you think this is truly a bug with this library, feel free to re-open this issue and supply a JSFiddle or equivalent that demonstrates the problem.

oncleguigs commented 5 years ago

I found that this was because of chrome security error throwing :

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet'

Check this issue

exupero commented 5 years ago

Thanks for the update. Is there anything this library can do about that limitation? Even better error detection would be helpful.