javascript，d3将svg保存为png会丢失颜色和字体

Question

我的svg-png几乎可以完美地在客户端运行，只是在javascript / d3中就可以了，但是却丢失了大量细节。 任何人都可以弄清楚为什么会这样吗？：原始图像是：

var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement("canvas");
canvas.width = d3.select("svg").attr("width");
canvas.height = d3.select("svg").attr("height");
ctx = canvas.getContext("2d");

var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );

img.onload = function() {
    ctx.drawImage( img, 0, 0 );

    var canvasdata = canvas.toDataURL("image/png");

    console.log(canvasdata)
    var pngimg = '<img src="'+canvasdata+'">'; 
    d3.select("#pngdataurl").html(pngimg);

    var a = document.createElement("a");

    a.download = "name"+".png";
    a.href = canvasdata;
    console.log(a.click())
};

输出为：

我也尝试过：

  var html = d3.select("svg")
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .node().parentNode.innerHTML;
var width = d3.select("svg").attr("width");
var height = d3.select("svg").attr("height");
image.src = 'data:image/svg+xml;base64,'+    btoa(unescape(encodeURIComponent(html))); 

但这失败了-在image.onload()我得到“提供的HTMLImageElement处于'破碎'状态”

Answer 1

在浏览器中将SVG保存为PNG会忽略所有应用于SVG元素的链接CSS样式。 如果使用的是d3.js，则可以使用以下方法将样式直接添加到特定类的元素中：

d3.selectAll(".mg-main-area").style("color","red");

有关更多详细信息，请参阅本文，我写了有关在浏览器中光栅化SVG的文章 。

从注释中看来，您似乎已在使用CSS的库，因此，如果您不想使用d3手动覆盖样式，则可以使用如下所示的jQuery代码从类中提取所有CSS元素并将它们作为内联样式应用：

$('.mg-main-area').each(function(i, e) {
    var st = e.style;
    var props = [];
    for(var prop in st) { 
        if($(this).css(prop)) {
            props.push(prop + ':' + $(this).css(prop));
        }
    }
    this.style.cssText = props.join(';');
    $(this).children().makeCssInline();
});