将含<use>标签的SVG加载至Canvas生成Base64 DataURL时出现空白图像的问题求助

我来帮你排查下问题所在，主要有两个核心原因导致你得到空白图像，咱们一步步解决：

1. 图像加载是异步操作，直接调用drawImage时图像未完成加载 #

你当前的代码在设置img.src后立刻执行ctx.drawImage，但此时SVG图像还没加载完毕，canvas自然画不出内容。必须等待图像加载完成后再进行绘制。

2. 替换内容后的SVG缺少viewBox属性，导致缩放异常 #

你把symbol的内容直接放到SVG里，但原symbol有viewBox="0 0 512 512"，而你的SVG只有width和height，没有viewBox的话，浏览器无法正确缩放SVG内容，会导致内容被挤出画布或者显示异常。

修正后的代码示例 #

我们需要处理异步加载，同时给SVG加上正确的viewBox：

async function convertSVG(classname) {
  return new Promise((resolve) => {
    const svgElement = document.querySelector(".green-check");
    const symbolElement = document.querySelector("#check-green-symbol");
    
    // 克隆原SVG，避免修改页面上的原始DOM
    const clonedSVG = svgElement.cloneNode(false);
    // 将symbol的内容复制到克隆的SVG中
    clonedSVG.innerHTML = symbolElement.innerHTML;
    // 加上symbol的viewBox属性，确保内容正确缩放适配
    clonedSVG.setAttribute('viewBox', symbolElement.getAttribute('viewBox'));
    
    const serializer = new XMLSerializer();
    const svgData = serializer.serializeToString(clonedSVG);
    
    // 用Blob和URL.createObjectURL更可靠，避免编码错误
    const svgBlob = new Blob([svgData], {type: 'image/svg+xml'});
    const imgUrl = URL.createObjectURL(svgBlob);
    
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = svgElement.clientWidth;
      canvas.height = svgElement.clientHeight;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      
      const dataUrl = canvas.toDataURL();
      URL.revokeObjectURL(imgUrl); // 释放URL对象，避免内存泄漏
      resolve(dataUrl);
      console.log(dataUrl);
    };
    img.src = imgUrl;
  });
}

// 调用示例
convertSVG().then(dataUrl => {
  // 在这里使用生成的Base64 DataURL
});

额外注意事项 #

• 不要直接修改原DOM：用cloneNode复制SVG元素，避免影响页面上原本正常显示的SVG。
• 编码方式选择：使用Blob和createObjectURL比直接拼接data:image/svg+xml,更稳定，能规避特殊字符、空格等编码问题。
• viewBox不可缺：这个属性定义了SVG的坐标系统，没有它，SVG内容无法正确适配指定的宽高，容易出现空白或变形。

这样修改后，应该就能正确生成包含绿色对勾的Base64 DataURL了。

内容的提问来源于stack exchange，提问作者user2360915