使用 html2canvas 将 d3js 图表 svg 导出为 png 时文本对齐方式发生变化

Question

我使用 D3js 版本 3 创建了圆包图表，下面是图表的快照。

我正在尝试使用以下代码使用 html2canvas 导出它：

html2canvas(document.getElementById("chart"), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

这里，chart 是 div 元素的 ID，它包含我试图导出为 png 的图表 svg。上面的代码工作正常并成功 returns png 图像，但是 svg 中文本的对齐方式和字体设置发生了变化，如下面的快照所示。

任何人都可以建议我如何将图表图像导出为具有相同文本设置的 png。

另请注意，我为此使用了以下 js 文件。

提前致谢。
巴格耶什

Answer 1

您可能正在 css 中设置 htm2canvas 无法访问的样式，因此不适用。如果您将所有内容都设置为 svg 的属性，它应该可以工作。

Text alignment changes on exporting d3js chart svg as png using html2canvas