如何将（SVG）图像添加到mxGraph

Question

我想将图像添加到mxGraph。 在我的尝试中，我看到gui处的框架，并且框架内部是图像文本而不是图像。 如何将图像添加到mxGraph？

我的代码如下：

    const newDiv = document.createElement('div');
    const parent = drawIoUi.editor.graph.getDefaultParent();
    drawIoUi.editor.graph.getModel().beginUpdate();
    const decodetSvg1 = btoa(this._svgTest);
    let newChart: any;
    try {
        newChart = drawIoUi.editor.graph.insertVertex(parent, null, newDiv, 40, 140, 300, 200);
    } finally {
        const fullImg1 =
            `<img alt="" style="width:100%; height:100%;" src="data:image/svg+xml;base64,` +
            decodetSvg1 +
            `">`;
        newChart.setAttribute('label', fullImg1);
        drawIoUi.editor.graph.getModel().endUpdate();
        drawIoUi.editor.graph.refresh();
        drawIoUi.editor.graph.container.focus();
    }

结果看起来像这样：

Answer 1

在具有图像形状的单元格样式中使用缩短的数据URI，例如

graph.insertVertex(parent, null, '', 20, 20, 80, 80,
                            'shape=image;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MCAyNTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1MCAyNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4mI3hhOzxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+JiN4YTsJLnN0MHtmaWxsOiNhMmEyYTI7fSYjeGE7CS5zdDF7ZmlsbDojOGU4ZThlO30mI3hhOwkuc3Qye2ZpbGw6I0ZGRkZGRjt9JiN4YTs8L3N0eWxlPiYjeGE7PHRpdGxlPlplaWNoZW5mbMOkY2hlIDE8L3RpdGxlPiYjeGE7PHBhdGggY2xhc3M9InN0MCIgZD0iTTIzNy41LDIyNy45YzAsNS4zLTQuMyw5LjYtOS41LDkuNmMwLDAsMCwwLDAsMEgyMi4xYy01LjMsMC05LjYtNC4zLTkuNi05LjVjMCwwLDAsMCwwLDBWMjIuMSAgYzAtNS4zLDQuMy05LjYsOS41LTkuNmMwLDAsMCwwLDAsMGgyMDUuOWM1LjMsMCw5LjYsNC4zLDkuNiw5LjVjMCwwLDAsMCwwLDBWMjI3Ljl6Ii8+JiN4YTs8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjM3LjUsMjI3LjljMCw1LjMtNC4zLDkuNi05LjUsOS42YzAsMCwwLDAsMCwwSDg5LjZMNDQuOCwxOTJsMjcuOS00NS41bDgyLjctMTAyLjdsODIuMSw4NC41VjIyNy45eiIvPiYjeGE7PHBhdGggY2xhc3M9InN0MiIgZD0iTTE5Ny4xLDEzOC4zaC0yMy43bC0yNS00Mi43YzUuNy0xLjIsOS44LTYuMiw5LjctMTJWNTEuNWMwLTYuOC01LjQtMTIuMy0xMi4yLTEyLjNjMCwwLTAuMSwwLTAuMSwwaC00MS43ICBjLTYuOCwwLTEyLjMsNS40LTEyLjMsMTIuMmMwLDAsMCwwLjEsMCwwLjF2MzIuMWMwLDUuOCw0LDEwLjgsOS43LDEybC0yNSw0Mi43SDUyLjljLTYuOCwwLTEyLjMsNS40LTEyLjMsMTIuMmMwLDAsMCwwLjEsMCwwLjEgIHYzMi4xYzAsNi44LDUuNCwxMi4zLDEyLjIsMTIuM2MwLDAsMC4xLDAsMC4xLDBoNDEuN2M2LjgsMCwxMi4zLTUuNCwxMi4zLTEyLjJjMCwwLDAtMC4xLDAtMC4xdi0zMi4xYzAtNi44LTUuNC0xMi4zLTEyLjItMTIuMyAgYzAsMC0wLjEsMC0wLjEsMGgtNGwyNC44LTQyLjRoMTkuM2wyNC45LDQyLjRoLTQuMWMtNi44LDAtMTIuMyw1LjQtMTIuMywxMi4yYzAsMCwwLDAuMSwwLDAuMXYzMi4xYzAsNi44LDUuNCwxMi4zLDEyLjIsMTIuMyAgYzAsMCwwLjEsMCwwLjEsMGg0MS43YzYuOCwwLDEyLjMtNS40LDEyLjMtMTIuMmMwLDAsMC0wLjEsMC0wLjF2LTMyLjFjMC02LjgtNS40LTEyLjMtMTIuMi0xMi4zICBDMTk3LjIsMTM4LjMsMTk3LjIsMTM4LjMsMTk3LjEsMTM4LjN6Ii8+JiN4YTs8L3N2Zz4=;');

您可以使用this tool对SVG文件进行编码。