javascript - 在javascript中从base64创建SVG

Question

我是 javascript 的新手。

我想从 base64 创建 SVG。我正在尝试 http://jsfiddle.net/XTUmV/28/但它没有显示任何内容。

 var image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
 var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image");
 svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', image);

 document.getElementById("mySvg").appendChild(svgimg);

和 html:

 <svg id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>

base64 应该是正确的，因为我从这个 http://jsfiddle.net/MxHPq/ 中获取了它例子

我在做一些愚蠢的事情还是错误的做法？

谢谢

Answer 1

你忘了给 <image>标记一些维度:

var image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image");
// new
svgimg.setAttribute( 'width', '100' );
svgimg.setAttribute( 'height', '100' );

svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', image);


document.getElementById("mySvg").appendChild(svgimg);

Edited Fiddle