javascript，d3保存sv​​g为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");

有关详细信息，请参阅this article, which I wrote有关在浏览器中对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();
});