D3js:通过base64数据uri将png硬嵌入到svg元素中？

Question

我成功地将png图像转换为数据uri,然后将这些数据注入到html元素中.

//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    $("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
    // data:[<mime type>][;charset=<charset>][;base64],<encoded data>
})

这证明了数据uri是正确的.

但由于某种原因,我找不到任何方法在客户端dataviz中使用d3js,因此数据uri最终显示预期的光栅图像.有些东西阻止它发挥作用.

//SVG part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    var width = 500, height = width/2;
    var svg = d3.select("svg").attr("width",width).attr("style","background:#80A0b4");
        svg.attr(':xmlns','http://www.w3.org/2000/svg') 
           .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
    var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr(":xlink:href", "data:image/png;base64," + data); // replace link by data URI
})

我怀疑在本机d3js xmlns名称空间中存在一些冲突,或者我输了一个拼写错误？有我的小提琴http://jsfiddle.net/xGUsu/106/.任何的想法 ？

(与我的svg中为什么我的base64编码的png不可见相关？ JS:如何将image.png编码为base64代码以进行数据URI嵌入？)

Answer 1

两个错误:

不需要这些行并导致错误(请参阅控制台):

    svg.attr(':xmlns','http://www.w3.org/2000/svg') 
       .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');

(除了:在前面显然是错误的.xmlns没有用:XML 编写)

其次,你忘了为你的<image>元素设置一个高度:

var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr("height", height ) 
        .attr("xlink:href", "data:image/png;base64," + data);

工作小提琴