如何在 canvas html 元素中以字符串格式绘制 SVG？

Question

我有一个字符串中的 svg，像这样：

const svgString = (color) => `<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

请考虑这是一个 svg 示例，真实的更大更复杂，所以不要太关注那个示例。

我想要的是在 canvas 中绘制 SVG 字符串。我试过这样的事情：

    const canvas = document.createElement('canvas');
    canvas.width = 18;
    canvas.height = 25;
    const ctx = canvas.getContext('2d');
    const path = new Path2D(svgString('red'));
    ctx.drawImage(path, 0, 0, 18, 25);

但是失败并出现以下错误：

"<a class='gotoLine' href='#52:5'>52:5</a> Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'."

知道如何解决这个问题吗？

const svgString = (color) => `<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

const canvas = document.createElement('canvas');
canvas.width = 18;
canvas.height = 25;
const ctx = canvas.getContext('2d');
const path = new Path2D(svgString('red'));
ctx.drawImage(path, 0, 0, 18, 25);

Answer 1

这里有两个例子。在这两个示例中，我都将 SVG 命名空间添加到字符串中，因为它是一个单独的 XML/SVG 文档而不是 HTML.

的一部分

在第一个示例中，我只是创建了一个数据 URL 并将其作为图像对象的源插入。这里需要设置宽高。

在第二个示例中，我使用了 Blob 和函数 URL.createObjectURL()。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

const svgString = (color) => `<svg xmlns="http://www.w3.org/2000/svg" height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

var img = new Image();
img.width = 500;
img.height = 150; 

img.addEventListener('load', e => {
  ctx.drawImage(e.target, 0, 0);
});

img.src = `data:image/svg+xml,${svgString('red')}`;

<canvas width="500" height="150" id="canvas"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

const svgString = (color) => `<svg xmlns="http://www.w3.org/2000/svg" height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

var svg = new Blob([svgString('red')], {
  type: "image/svg+xml;charset=utf-8"
});

var url = URL.createObjectURL(svg);
var img = new Image();

img.addEventListener('load', e => {
  ctx.drawImage(e.target, 0, 0);
  URL.revokeObjectURL(url);
});

img.src = url;

<canvas width="500" height="150" id="canvas"></canvas>

如何在 canvas html 元素中以字符串格式绘制 SVG？

How to draw a SVG in string format in a canvas html element?

html

javascript

svg

canvas