save-svg-as-png 在下载 svg 为 png 时未加载 svg css

Question

我正在使用 save-svg-as-png 模块将生成的 svg 从 d3 层次结构树下载到 png。

下面是浏览器生成的svg

但是当我下载它的时候，一些css丢失了，因为图表不可读

下面是我用来下载的代码

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

我该如何解决这个问题。

提前致谢！

Answer 1

所有面临此问题的人。正如@RobertLongson 在评论中所建议的那样，当我切换到内联 css 而不是外部 css.

时它起作用了

导致问题的外部代码 css

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

外部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;
}

内联代码 css，解决了问题

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}`
    })

希望这对某人有所帮助！

save-svg-as-png 在下载 svg 为 png 时未加载 svg css

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

javascript

css

jquery

svg

d3.js