5

背景

我svg在一个文档中有一堆 's （每个里面都有rect,path和诸如此类的东西），我需要将其绘制成可下载的 PNG 图像。我知道为了做到这一点，有两种方法：要么将页面的 HTML 结构绘制到 acanvas然后从那里导出，要么将 SVG 及其内容直接渲染到canvas.

假设

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

结果

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

问题

我想澄清一下，我之所以拥有多个svg's，是因为我可以将它们放置在响应式网格系统中并通过纵横比调整大小。事不宜迟，我问我的问题：如何将多个svg元素渲染到一个canvas？ 如果该问题的答案是“不可能”，那么接下来我的问题是：我是否应该渲染一个svg并以另一种方式处理响应性？

4

1 回答 1

3

您应该能够像任何其他图像一样将 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/ )，则适用CORS（跨源资源共享getImageData）。如果不是，它们应该正常工作。
于 2013-07-30T02:11:05.957 回答