D3js：通过base64数据uri将png硬嵌入svg元素？答案

【问题标题】：D3js: Hard embedding png into svg element via base64 data uri?D3js：通过base64数据uri将png硬嵌入svg元素？
【发布时间】：2015-05-01 13:06:35
【问题描述】：

我成功地将 png 图像转换为数据 uri，然后将这个数据 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/ 。 有什么想法吗？

（与Why is my base64-encoded png not visible inside my svg?JS: how to encode an image.png into base64 code for data URI embedding?相关）

【问题讨论】：

标签： xml svg d3.js data-uri xlink

【解决方案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);

Working Fiddle

【讨论】：