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

在javascript中从base64创建SVG

1 个答案: