使用html2canvas捕获含内联SVG的div生成PNG的问题

我之前也踩过html2canvas处理内联SVG的坑，结合你描述的情况（子div正常捕获但SVG出问题），大概率是渲染兼容性或样式/属性的问题，给你几个实测有效的解决办法：

1. 开启html2canvas的Foreign Object渲染模式 #

html2canvas默认的渲染模式对SVG支持有限，开启useForeignObject配置后，会用浏览器的原生foreignObject来处理SVG，兼容性更好：

html2canvas(document.querySelector('#目标div'), {
  useForeignObject: true,
  // 其他配置项（比如scale、logging等）
}).then(canvas => {
  // 生成PNG图片
  const pngData = canvas.toDataURL('image/png');
  // 后续操作：下载/插入页面展示等
});

注意：这个配置在现代浏览器（Chrome、Firefox、Edge）都能正常工作，旧版IE可能不支持，但现在应该很少有人用IE了。

2. 清理SVG的冗余/冲突属性 #

你提供的SVG里有几个可能出问题的点：

• style="enable-background:new 0 0 512.001 512.001;" 和 viewBox="0 0 645 585" 的尺寸不匹配，html2canvas可能会因为这个渲染异常，建议删掉enable-background属性试试；
• 确保SVG的所有样式都是内联的，或者在SVG内部通过<style>标签定义，外部CSS对SVG的样式html2canvas经常捕获不到。比如你的replaced-svg类样式，最好移到SVG内部：

<svg version="1.1" id="img-15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 645 585" xml:space="preserve" class="svg replaced-svg">
  <style type="text/css">
    .replaced-svg { /* 这里写你的类样式 */ }
    path { /* 如果path有样式也写在这里 */ }
  </style>
  <path [...]/></svg>

3. 把SVG转为Data URL再渲染 #

如果上面两种方法都不行，最稳妥的办法是先把内联SVG转成base64格式的Data URL，替换成img标签后再让html2canvas捕获：

// 获取目标SVG元素
const svgEl = document.getElementById('img-15');
// 序列化SVG为字符串
const svgString = new XMLSerializer().serializeToString(svgEl);
// 转成base64 Data URL（处理特殊字符避免乱码）
const encodedSvg = encodeURIComponent(svgString);
const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodedSvg))}`;

// 创建img元素替换SVG
const imgEl = document.createElement('img');
imgEl.src = svgDataUrl;
imgEl.style.width = svgEl.style.width;
imgEl.style.height = svgEl.style.height;
svgEl.parentNode.replaceChild(imgEl, svgEl);

// 调用html2canvas生成图片
html2canvas(document.querySelector('#目标div')).then(canvas => {
  const pngData = canvas.toDataURL('image/png');
  // 这里可以下载图片或者插入页面展示
  // 记得如果需要恢复原SVG，把img再替换回去
  imgEl.parentNode.replaceChild(svgEl, imgEl);
});

4. 升级html2canvas到最新版本 #

旧版本的html2canvas对SVG的支持有很多bug，比如无法处理某些命名空间属性，升级到最新版能解决大部分兼容性问题。

优先试试前两个方法，不行再用第三个，基本能解决90%以上的SVG捕获问题。

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