d3.js save-svg-as-png下载svg为png时，不加载svg css

kg7wmglp 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(228)

我正在使用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,
  });
};

如何解决此问题。
提前感谢！

d3.js

来源：https://stackoverflow.com/questions/71989606/save-svg-as-png-not-loading-the-svg-css-while-downloading-the-svg-as-png

1条答案

按热度按时间

oipij1gg1#

致所有面临这个问题的人。正如@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}`
    })

希望这对某人有帮助！

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js save-svg-as-png下载svg为png时，不加载svg css

1条答案

相关问题

热门标签

最新问答