在画布上显示 SVG 字符串

Question

我想在画布上显示一串 SVG；

一种方法是在页面上添加一个虚拟的 img 元素，并使用它来将 SVG “转换”为可以在画布上绘制的内容。

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"/>

但这似乎效率低下。如何将 svg 变量直接写入画布？

或者，我可以简单地把它写在里面，例如一个 div 标签，因为它是有效的代码。但是，我正在使用画布将 SVG 转换为 png/jpg 并将其保存到磁盘。我怎样才能做到这一点？

Answer 1

您可以使用canvg。它允许您将 SVG 文档直接渲染到画布上。