使用mPDF库时C3.js SVG转PNG出现黑色背景问题求助

核心原因 #

SVG本身默认是透明背景，转换为PNG并嵌入PDF时，透明区域在mPDF的渲染逻辑中会被填充为黑色。加上C3.js生成的SVG通常不会自带背景色，Canvas绘制时默认透明，最终导致黑色背景问题。

解决方案 #

方案1：绘制SVG前给Canvas填充白色背景 #

在将SVG图像绘制到Canvas前，手动填充白色背景覆盖Canvas的透明默认值，修改img.onload代码：

img.onload = function() {
    canvas.width = svg.clientWidth;
    canvas.height = svg.clientHeight;
    // 先填充白色背景
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // 再绘制SVG图像
    ctx.drawImage(img, 0, 0);
    const chartImageBase64 = canvas.toDataURL('image/png');

    // 后续表单提交逻辑不变
    document.getElementById('htmlContent').value = campaignContent;
    document.getElementById('chartImage').value = chartImageBase64;
    document.getElementById('formPDF').submit();
};

方案2：给SVG本身添加白色背景矩形 #

直接修改C3生成的SVG，在最底层插入覆盖整个图表区域的白色矩形，确保SVG自带背景：

// 获取SVG后添加背景矩形
const svg = document.querySelector('#chart svg');
// 创建SVG命名空间的矩形元素
const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bgRect.setAttribute('x', '0');
bgRect.setAttribute('y', '0');
bgRect.setAttribute('width', svg.clientWidth);
bgRect.setAttribute('height', svg.clientHeight);
bgRect.setAttribute('fill', '#ffffff');
// 插入到SVG最前面（保证在底层）
svg.insertBefore(bgRect, svg.firstChild);

// 后续序列化SVG的代码不变
const svgData = new XMLSerializer().serializeToString(svg);

额外注意事项 #

• 确保C3.js样式内联：如果图表依赖外部CSS，序列化SVG时不会包含这些样式，可能导致显示异常。可以在c3.generate()时通过style配置直接内联样式，或用工具将外部CSS注入SVG元素。
• 无需额外配置mPDF：上述方案已覆盖透明区域的处理，默认mPDF设置即可正常渲染。

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