在画布上显示SVG字符串

Question

I want to display a string of SVG on a canvas;

One method is to have a dummy img element on the page and use it to "transform" the SVG into something you can draw on a canvas.

 const svg='<svg id=\\"Layer_1\\" data-name=\\"Layer 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"1657\\" height=\\"1235\\" viewBox=\\"0 0 1657 1235\\">\\r\\n <title>MTF</title>\\r\\n<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/></svg>'; const svgURL = `data:image/svg+xml,${svg}`; const img = document.getElementById('i'); img.setAttribute('src', svgURL); const canvas = document.getElementById('c'); const context = canvas.getContext('2d'); context.drawImage(img, 0, 0); 

 <div> <canvas id="c"> </canvas> </div> <img src="" id="i"/> 

But this seems inefficient. How can I write the svg variable onto a canvas directly?

Alternatively, I could simply write it inside eg a div tag as it is valid code. However, I am using canvas to convert the SVG to png/jpg and save it to disk. How can I accomplish this?

Answer 1

You could use canvg . It allows you to render SVG documents directly onto a canvas.