在画布上显示SVG的字符串

时间:2017-01-12 19:29:58

标签: javascript dom canvas svg

我想在画布上显示一串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标签,因为它是有效的代码。但是,我使用canvas将SVG转换为png / jpg并将其保存到磁盘。我怎么能做到这一点?

1 个答案:

答案 0 :(得分:0)

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