如何在 HTML5 画布上绘制 Javascript 修改的 SVG 对象？答案

【问题标题】：How do I draw a Javascript-modified SVG object on a HTML5 canvas?如何在 HTML5 画布上绘制 Javascript 修改的 SVG 对象？
【发布时间】：2019-02-14 18:18:35
【问题描述】：

我要完成的总体任务是加载 SVG 图像文件，在某处修改颜色或文本，然后将其绘制到 HTML5 画布上（可能使用 drawImage()，但任何合理的替代方案都可以） .

我在另一个 StackOverflow 问题上遵循了关于如何在 Javascript 中加载和修改 SVG 文件的建议，如下所示：

<object class="svgClass" type="image/svg+xml" data="image.svg"></object>

在 Javascript 中遵循

document.querySelector("object.svgClass").
    getSVGDocument().getElementById("svgInternalID").setAttribute("fill", "red")

这行得通。现在我的网页中显示了修改后的 SVG。

但我不想只显示它 - 我想将它作为 HTML5 画布更新的一部分进行绘制，如下所示：

ctx.drawImage(myModifiedSVG, img_x, img_y);

如果我尝试存储 getSVGDocument() 的结果并将其作为 myModifiedSVG 传递，我只会收到一条错误消息。

如何为修改后的 SVG 进行 HTML5 画布绘制调用？

编辑：我可以通过这样做在 HTML5 画布上绘制 SVG 图像：

var theSVGImage = new Image();
theSVGImage.src = "image.svg";
ctx.drawImage(theSVGImage, img_x, img_y);

这很好，但我不知道如何以这种方式修改我加载的 SVG 图像中的文本/颜色！如果有人可以告诉我如何进行修改，那么这也是一个解决方案。我不拘泥于通过对象 HTML 标记。

【问题讨论】：

您可以使用 illustrator 制作 svg。保存后，您可以在任何代码编辑器中重新打开您的 svg，就像 html 一样，然后您可以编辑颜色。
谢谢，但我需要逐帧将颜色更改为不同的颜色，所以没有一种单一的静态颜色可以做到。
This answer 有最短的解决方案。（很明显，你可以省略最后的canvas.toDataURL()。
如果您希望每帧更改 svg，可能值得使用库。可以使用 ccprog 链接中的方法来完成，但这意味着每帧加载一个全新的 svg 图像。这对于浏览器来说很多，并且考虑到任务的异步性，能够提前生成足够多的这些帧将是一场编码噩梦。一些库能够将 SVG 标记转换为画布命令，其中一些库暴露了 js他们使用的对象并允许您对其进行编辑（例如fabricjs）。总的来说，我想这对你来说会是一个更聪明的举动（天哪，我不喜欢库......）
好主意，SVG 到 javascript 转换器可能在这里工作。就像你说的那样，我可以很容易地找到我想要更改的文本/颜色的行，并且它确实节省了每帧重新加载（和重新解析）整个 SVG。

标签： javascript html svg canvas

【解决方案1】：

对于一次拍摄，您可以重建一个新的 svg 文件，将其加载到中并在画布上再次绘制：

async function doit() {
  const ctx = canvas.getContext('2d');
  const images = await prepareAssets();
  let i = 0;
  const size = canvas.width = canvas.height = 500;
  canvas.onclick = e => {
    i = +!i;
    ctx.clearRect(0, 0, size, size);
    ctx.drawImage(images[i], 0,0, size, size);
  };
  canvas.onclick();
  return images;
}

async function prepareAssets() {
  const svgDoc = await getSVGDOM();
  // There is no standard to draw relative sizes in canvas
  svgDoc.documentElement.setAttribute('width', '500');
  svgDoc.documentElement.setAttribute('height', '500');
  // generate the first <img> from current DOM state
  const originalImage = loadSVGImage(svgDoc);
  // here do your DOM manips
  svgDoc.querySelectorAll('[fill="#cc7226"]')
    .forEach(el => el.setAttribute('fill', 'lime'));
  // generate new <img>
  const coloredImage = loadSVGImage(svgDoc);
  
  return Promise.all([originalImage, coloredImage]);
}
  
function getSVGDOM() {
  return fetch('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')
    .then(resp => resp.text())
    .then(text => new DOMParser().parseFromString(text, 'image/svg+xml'));
}

function loadSVGImage(svgel) {
  // get the markup synchronously
  const markup = (new XMLSerializer()).serializeToString(svgel);
  const img = new Image();
  return new Promise((res, rej) => {
    img.onload = e => res(img);
    img.onerror = rej;
    // convert to a dataURI
    img.src=  'data:image/svg+xml,' + encodeURIComponent(markup);
  });
}

doit()
  .then(_ => console.log('ready: click to switch the image'))
  .catch(console.error);

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

但是如果你打算用很多帧来做，并期望它有动画......

您必须将 svg 转换为 Canvas 绘图操作。

上述方法是异步的，因此您无法可靠地动态生成新图像并准备好在单帧中绘制。您需要提前存储其中的一些，但由于加载图像需要多长时间是完全随机的（至少应该如此），这可能是一个真正的编程噩梦。
再加上浏览器在每帧加载一个全新的 SVG 文档时所产生的开销 _{（是的，即使加载到中，浏览器也会加载 SVG 文档）}，然后将其绘制在画布上，最后将它从内存中删除，很快就会被填满，你不会有太多空闲的 CPU 来做其他事情。

所以这里最好的方法可能是解析您的 SVG 并将其转换为 CanvasRenderingContext2D 绘图操作 => 自己绘制。

这是可以实现的，而且现在我们可以将 d 属性直接传递给 Path2D 对象构造函数，并且大多数 SVG 对象在 Canvas2D API 中都有对应关系（我们甚至可以使用 SVG 过滤器），但这仍然是很多工作。

因此，您可能想查看执行此操作的库。我自己不是库专家，我不能推荐任何库，但我知道canvg 很长一段时间以来都是这样做的，我只是不知道他们是否确实以可重用的方式公开了他们的 js 对象.我知道Fabric.js 确实如此，但它还附带了许多您可能不需要的其他功能。

选择权在你。

【讨论】：