html5 svg在线编辑器,在HTML5画布上绘制SVG文件

您可以svg通过以下方式在画布上轻松绘制简单的s：

将svg的源分配为base64格式的图像

将图像绘制到画布上

注意：该方法唯一的反向是它无法绘制嵌入的图像svg。(见演示)

示范：

(请注意，嵌入的图像仅在其中可见svg)

var svg = document.querySelector('svg');

var img = document.querySelector('img');

var canvas = document.querySelector('canvas');

// get svg data

var xml = new XMLSerializer().serializeToString(svg);

// make it base64

var svg64 = btoa(xml);

var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"

var image64 = b64Start + svg64;

// set it as the source of the img element

img.src = image64;

// draw the image onto the canvas

canvas.getContext('2d').drawImage(img, 0, 0);

svg, img, canvas {

display: block;

}

SVG

---

IMAGE

---

CANVAS

---