是否可以将多个SVG绘制到画布上？

Question

背景

我在一个文档中有一堆svg个（rect，path，以及每个内部的东西），我需要将其绘制到可下载的PNG中图片。我理解为了做到这一点，有两种方法：将页面的HTML结构绘制到canvas然后从那里导出或将SVG及其内容直接渲染到canvas 1}}。

假设

第一个假设我尝试使用html2canvas呈现HTML结构，并且发现SVG无法通过HTML结构呈现（由于安全问题）。第二个假设我尝试通过canvg将SVG渲染到画布，但发现它只允许渲染一个SVG元素，而只渲染第一个SVG元素。

结果

要证明第一个错误，请在http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect中输入this URL并禁用Javascript。为证明第二个错误，我有fiddle to try out。

---

问题

我想明确表示我有多个svg的推理是为了让我可以将它们置于响应式网格系统中并通过宽高比调整大小。不用多说，我问我的问题：如何将多个svg元素呈现给canvas？如果该问题的答案是“不可能”，接下来我的问题是：我应该改为渲染一个svg并以另一种方式处理响应吗？

Answer 1

您应该能够像任何其他图像一样将SVG绘制到画布：

var img1 = document.createElement('img'),
    img2 = document.createElement('img')
    count = 2;

/// image loading is async, make sure they are loaded
img1.onload = img2.onload = function() {
    count--;
    if (count === 0) drawImages();
}
img1.src = 'some1.svg';
img2.src = 'some2.svg';

/// when loaded, draw them somewhere on the canvas
function drawImages() {
    ctx.drawImage(img1, 0, 0);
    ctx.drawImage(img2, someX, someY);
}

话虽如此 - 有一些限制：

• 当没有在SVG文件中设置宽度和高度时，FireFox当前不希望draw images properly。
如果您要将图片提取为位图（toDataURL / getImageData），则
• CORS (Cross-Origin Resource Sharing)适用。如果不是，他们应该正常工作。