save-svg-as-png not loading the svg css, while downloading the svg as png

Question

I am using save-svg-as-png module to download generated svg from d3 hierarchy tree to png.

Below is the svg generated in browser

But when I download it, some css are missing due to which graph is unreadable

Below is the code i am using to download

var saveSvgToPng = document.getElementById("download-button");
saveSvgToPng.onclick = function () {
  saveSvgAsPng(d3.select('svg').node(), "dia.png", {
    scale: 2,
  });
};

How do I resolve this issue.

Thanks in advance!

Answer 1

To all who are facing this issue. As suggested by @RobertLongson in the comment, it worked when I switched to inline css instead of external css.

Code with external css which was causing the issue

nodes
    .append("text")
    .attr("font-size", "12px")
    .attr("text-anchor", "middle")
    .text(function (d) {
        return `${d.data.name}`
    })

External css

text {
  text-shadow: -1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white,
      1px 1px 3px white;
  cursor: pointer;
  font-family: "Playfair Display", serif;
}

Code with inline css, which fixed the issue

nodes
    .append("text")
    .attr("font-size", "12px")
    .attr("text-anchor", "middle")
    .style(
      "text-shadow",
      `-1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white,
      1px 1px 3px white`
    )
    .style("cursor", "pointer")
    .style("font-family", `"Playfair Display", serif`)
    .text(function (d) {
        return `${d.data.name}`
    })

Hope this helps someone!