javascript, d3 将 svg 保存为 png 失去颜色和字体答案

【问题标题】：javascript, d3 save svg as png loses color and fontjavascript, d3 将 svg 保存为 png 失去颜色和字体
【发布时间】：2016-01-29 23:39:59
【问题描述】：

我的 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 处于'损坏'状态”

【问题讨论】：

您可能正在通过 CSS 设置样式。这通常不适用于渲染为 PNG；尝试直接在代码中设置所有内容。
您好，感谢您的回复 - 我想我明白了：path 有以下类别：mg-main-area mg-area1 mg-area1-color。通过 css 应用它们的最佳方式是什么？
您需要将更改应用到代码中的属性。你不能使用 CSS。
我正在使用设置 css 的 metrics-graphics 库。有没有办法使用 javascript 自动执行此操作 - 即某种读取当前 css 并将其应用于属性的方式？
我不知道。

标签： javascript d3.js svg png

【解决方案1】：

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

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

有关在浏览器中光栅化 SVG 的更多详细信息，请参阅 this article, which I wrote。

从 cmets 看来你有应用 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();
});

【讨论】：