将Textpath svg 转换成 png 的问题

Question

我正在进行一个SVG图形导出（使用d3.js库）到PNG的工作。问题是标签textPath。当导出到PNG时，文本不会出现。有人知道是否有解决这个问题的方法吗？

我用来进行转换的代码如下:

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var png = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    a.download = "grafico.png";
    a.href = png;
    a.click();
    DOMURL.revokeObjectURL(png);
};
img.src = url;

非常感谢大家。 祝好， Sonia

- Sonia

Answer 1

已解决。我使用CSS样式表中的属性进行了修复，例如：

font-size: 16px;
color: black;
fill: none;

- Sonia

Answer 2

我也有同样的问题。看起来这种转换方法不能获取正文的字体大小。不过，将生成的SVG转储到.svg文件中，并在浏览器中打开该文件就可以正确呈现。

- Quant