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

Question

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

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

<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标记。

Answer 1

对于一次性，您可以重建一个新的svg文件，将其加载到<img>并在画布上再次绘制它：

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);

<canvas id="canvas"></canvas>

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

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

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

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

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

所以你可能想看一下这样做的库。我自己不是图书馆的专家，我不能推荐任何图书馆，但我知道canvg这么做很久以后，我只是不知道他们是否以可重复的方式公开他们的js对象。我知道Fabric.js确实如此，但它也带有许多你可能不需要的其他功能。

这是你的选择。