D3js:硬盘通过嵌入的base64数据URI png格式到SVG元素?

问题描述 投票:1回答:1

我是成功的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个回答
6
投票

两个错误:

这些线不需要和导致错误(见控制台):

    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

© www.soinside.com 2019 - 2024. All rights reserved.