如何在SVG中导出PNG

Question

I have some trouble to export my SVG which contains a PNG image in it. I'm using D3JS and the following code.

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

It seems that an error occurs: Namespace prefix xlink for href on image is not defined . The PNG image is correctly displayed in the SVG container but not in #chartRender

Any idea ?

Update 1 : Drawing the image in a canvas works

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)

But displaying the datas show empty content :(

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

You need to add xmlns:xlink to your svg tag.

It should look like this:

<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">

So just do...

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

UPDATE

I created a JSBIN to help us with this. It is working just fine.

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

Does it solve your problem?