如何在 SVG 中导出 PNG

Question

我在导出包含 PNG 图像的 SVG 时遇到了一些麻烦。我正在使用 D3JS 和以下代码。

mysvg.append("image")
  .attr("width", 299)
  .attr("height", 168)
  .attr("xlink:href", "image.png")

var html = d3.select("svg")
  .attr("version", 1.1)
  .attr("xmlns", "http://www.w3.org/2000/svg")
  .node().parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#chartRender").html(img);

似乎发生了错误：Namespace prefix xlink for href on image is not defined。 PNG 图像在 SVG 容器中正确显示，但在 #chartRender 中不正确显示

有什么想法吗？

更新 1： 在画布中绘制图像工作

canvas = d3.select("body").append("canvas").attr("id", "newCanvas")
  .attr("width", "200px").attr("height", "100px").node()
context = canvas.getContext('2d')
imageObj = new Image()
imageObj.src = params.url
imageObj.onload = -> context.drawImage(imageObj, 0, 0)

但显示数据显示内容为空:(

imageData = canvas.toDataURL("image/png")
d3.select("body").append("img").datum(imageData).attr("src", (d)-> return d)
d3.select("svg").append("image").datum(imageData).attr("height", "100")
  .attr("width", "200").attr("xlink:href", (d)-> return d)

Answer 1

您需要将xmlns:xlink 添加到您的 svg 标签中。

应该是这样的：

<svg width="xxx" height="yyy" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

那就去做吧……

.attr("xmlns:xlink", "http://www.w3.org/1999/xlink")

更新

我创建了一个 JSBIN 来帮助我们解决这个问题。它工作得很好。

var mysvg = d3.select('#mysvg');

var src = 'http://placehold.it/350x150';

mysvg.append("image")
  .attr("width", 350)
  .attr("height", 150)
  .attr("xlink:href", src);

var img = document.createElement('img');
    img.src = src;

document.getElementById("target").appendChild(img);

它能解决你的问题吗？