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();
});