Base64 SVG圖像

Question

我無法獲得base64數據URI和SVG作為圖像顯示。

我嘗試了一個<img>和一個<canvas> ，因為SVG都沒有顯示出來。

 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); 

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

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

在Chrome和Firefox中測試過。

SVG出現的不是什么？

Answer 1

當像這樣嵌入svg時，記得為svg設置xmlns ：

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"