Base64 SVG图像

Question

我无法获取base64数据URI，并且SVG显示为图像。

我尝试了<img>和<canvas>，因为SVG都没有出现。

＆＃13;

＆＃13;

var url = 'data:image/svg+xml;base64,' + btoa('<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>');

document.getElementById('image').src = url;

var context = document.getElementById('canvas').getContext('2d');
var image = new Image();
image.src = url;
context.drawImage(image, 0, 0);

＆＃13;

canvas, img {
    border: 1px solid black;
}

＆＃13;

<img id="image" width="200" height="200">

<canvas id="canvas" width="200" height="200"></canvas>

＆＃13;

＆＃13;

＆＃13;

在Chrome和Firefox中测试过。

SVG出现的是什么？

Answer 1

在嵌入这样的svg时，请记得为xmlns设置svg：

var url = 'data:image/svg+xml;base64,' + 
           btoa('<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>');

如果您的svg元素中使用了任何xlink前缀，您还应添加xmlns:xlink="http://www.w3.org/1999/xlink"