Display string of SVG on canvas

2018-06-05 19:56:42

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">rn  <title>MTF</title>rn<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"/>

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

链接地址: http://www.djcxy.com/p/18328.html

上一篇: Haxe的JavaScript没有全球命名空间污染？

下一篇: 在画布上显示SVG字符串