[英]Base64 SVG images
我无法获得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出现的不是什么?
当像这样嵌入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"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.