mxgraph中SVG图片无法导出为PDF或PNG的问题求助

我之前基于mxGraph的GraphEditor做项目时，也碰到过完全一样的坑——SVG在编辑器里拖拽、缩放、保存打开都正常，一导出PNG或PDF就凭空消失了！后来翻了mxGraph的源码才搞明白，这是因为它的导出机制默认只处理常规图形和位图，不会自动解析渲染SVG元素，得手动给它加个SVG转Canvas的逻辑。

下面是我亲测有效的解决方案：

1. 重写mxCellRenderer的渲染方法，专门处理SVG节点 #

mxGraph渲染单元格靠的是mxCellRenderer，我们可以重写它的paintVertexShape方法，识别SVG类型的单元格，把SVG转换成Canvas能绘制的图像：

// 先保存原方法，避免覆盖后丢失默认图形的渲染逻辑
const originalPaintVertexShape = mxCellRenderer.prototype.paintVertexShape;

mxCellRenderer.prototype.paintVertexShape = function(c, x, y, w, h, style, cell) {
    // 检查当前单元格是否携带SVG内容（这里假设你把SVG字符串存在style的svgContent属性里）
    if (style.svgContent) {
        try {
            // 将SVG字符串转为Data URL，避免跨域或路径访问问题
            const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(style.svgContent)))}`;
            const img = new Image();
            
            // 图片加载完成后绘制到Canvas上下文
            img.onload = () => {
                c.drawImage(img, x, y, w, h);
            };
            img.src = svgDataUrl;
            return; // 跳过原方法，避免重复绘制
        } catch (e) {
            console.error('渲染SVG失败:', e);
            // 出错时回退到原方法渲染默认图形
            originalPaintVertexShape.call(this, c, x, y, w, h, style, cell);
        }
    }
    // 非SVG单元格直接调用原方法处理
    originalPaintVertexShape.call(this, c, x, y, w, h, style, cell);
};

2. 确保SVG内容能被导出机制正常访问 #

• 不要用外部SVG文件的URL，最好把SVG的完整XML字符串存在单元格的样式属性（比如上面的svgContent）或者单元格的value里，这样导出时能直接拿到完整的SVG代码，不会因为跨域或文件路径问题加载失败。
• 如果你的SVG是从外部文件加载的，记得用AJAX或fetch把内容读取成字符串再存起来，比如：

  // 示例：加载外部SVG文件并赋值给cell的样式
  fetch('your-custom-icon.svg')
    .then(res => res.text())
    .then(svgStr => {
        const style = mxUtils.clone(graph.getCellStyle(cell));
        style.svgContent = svgStr;
        graph.setCellStyle(style, [cell]);
    });
  

3. 处理导出时的异步渲染问题 #

因为SVG转Image是异步操作，直接调用导出方法可能会因为图片没加载完导致导出空白。你可以用mxExportPreview确保所有SVG都渲染完成后再导出：

const preview = new mxExportPreview(graph, 1, true);
preview.show(() => {
    // 预览加载完成后执行导出
    if (typeof mxPdfExport !== 'undefined') {
        // PDF导出示例
        const pdfExport = new mxPdfExport(graph);
        pdfExport.draw();
    } else {
        // PNG导出示例
        const img = mxUtils.createImage(graph.getImageData());
        // 这里可以添加下载或保存图片的逻辑
        const link = document.createElement('a');
        link.href = img.src;
        link.download = 'graph-export.png';
        link.click();
    }
});

额外注意事项 #

• SVG里不要引用外部资源（比如外部字体、远程图片），否则导出时这些资源可能加载失败，导致SVG渲染不完整。
• 测试SVG时可以先把它转成Data URL直接在浏览器里打开，确认能正常显示，再放到mxGraph里使用。

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