是否可以绘制多个SVG's到画布上

Is it possible to draw multiple SVG's to a canvas?

本文关键字：绘制 SVG 是否      更新时间：2023-09-26

背景

我在一个文档中有一堆svg（每个文档中都有rect、path等等），我需要将其绘制成一个可下载的PNG图像。我知道要做到这一点，有两种方法：要么将页面的HTML结构绘制到canvas，然后从那里导出，要么将SVG及其内容直接渲染到canvas上。

假设

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

结果

要证明第一个错误，请在此URL中键入http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect并禁用Javascript。为了证明第二个是错的，我有一把小提琴要试。

问题

我想明确一点，我拥有多个svg的理由是，我可以将它们放置在一个响应网格系统中，并通过纵横比调整大小。事不宜迟，我提出一个问题：如何将多个svg元素渲染为一个canvas如果该问题的答案是"；这是不可能的"；，那么接下来我的问题是：我应该呈现一个svg，并用另一种方式处理响应性吗

您应该能够像绘制任何其他图像一样在画布上绘制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);
}

话虽如此，但有几个限制：

  • FireFox当前不希望在SVG文件中未设置宽度和高度的情况下正确绘制图像
  • 如果要将图像提取为位图（toDataURL/getImageData），则应用CORS（跨原点资源共享）。如果没有，他们应该正常工作
相关文章：