时间戳

首页 > 解决方案 > 如何将 svg 图像添加到 mxgraph 工作流编辑器示例

xml - 如何将 svg 图像添加到 mxgraph 工作流编辑器示例

问题描述

我正在使用 mxgraph 的工作流编辑器示例。在这个我可以将形状添加到工具栏并从它拖放到画布上，但图像是 png 格式。而不是 png 我想要 svg 图像。下面是我用来添加我的 png 的代码。

<mxEditor defaultGroup="group" defaultEdge="edge"
    helpWindowImage="images/help.gif"
    tasksWindowImage="images/tasks.gif"
    ....
    ....
    <Array as="templates">
    <add as="task">
            <Task label="Task" description="" href="">
                <mxCell vertex="1" style="symbol;image=images/task.PNG">    
                    <mxGeometry as="geometry" width="100" height="80"/>
                </mxCell>
            </Task>
        </add>
    </Array>

在我的工具栏中，我将其添加为

<mxDefaultToolbar>
    <add as="Task" template="task" style="symbol;image=images/task.PNG" icon="images/taskgif.gif"/>
</mxDefaultToolbar>

但是我想使用 svg 图像而不是样式中使用的 png 图像.. 我尝试如下。

<mxDefaultToolbar>
    <add as="Task" template="task" style="shape=image;image=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iIHN0eWxlPSItbXMtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDIwNDggMjA0OCI+PHBhdGggZD0iTTEwMjQuMDIyIDk5LjM2Yy0xOS4zMjQtLjAxNy0zOC42NDYgNy4xNS01Mi45OCAyMS41NUwxMjAuOTM3IDk3MS4wMjNjLTI4LjY3IDI4LjY2OC0yOC41MzcgNzcuMjk1LjEzMiAxMDUuOTYzbDg0OS45NzEgODQ5Ljk2NWMyOC42NyAyOC42NzggNzcuMjk0IDI4LjgwNCAxMDUuOTYzIDBsODUwLjEwNi04NTAuMWMyOC42NjktMjguNjY3IDI4LjUzNi03Ny4yOTYtLjEzNS0xMDUuOTY0TDEwNzcuMDAyIDEyMC45MWMtMTQuMzM0LTE0LjMzNC0zMy42NTctMjEuNTM0LTUyLjk4LTIxLjU1em0tLjA2NSAxMjYuMDQ1bDc5OC42NiA3OTguNjY2bC03OTguNjYgNzk4LjY1N2wtNzk4LjY2LTc5OC42NTdsNzk4LjY2LTc5OC42NjZ6TTcyNS42ODYgNjY5Ljc5MmMtLjAxNCAwLTkuNjEyIDEuODM4LTkuNjIgMS44MzhjLS4wMSAwLTguMTQ0IDUuNTEzLTguMTUgNS41MTNsLTMwLjczMiAzMC43MzljLS4wMSAwLTUuNjEgOC4yMjUtNS42MTQgOC4zMjJjMCAuMDEtMS43MzcgOS40OC0xLjczNiA5LjQ4YzAgLjAxIDEuODY4IDkuMzg1IDEuODcxIDkuMzg1YzAgLjAxIDUuMzM4IDguMzIyIDUuMzQ0IDguMzIybDI4MC43MDcgMjgwLjdsLTI4MC41NzIgMjgwLjU3NHYtLjA4OGMwIC4wMS01LjYxIDguMzItNS42MTQgOC4zMmMwIC4wMS0xLjczNiA5LjQ4My0xLjczNiA5LjQ4M2MwIC4wMiAxLjg2OCA5LjM4NSAxLjg3MSA5LjM4NWMwIDAgNS4zMzkgOC4yMjMgNS4zNDQgOC4zMmwzMC43MzQgMzAuNzI4Yy4wMS4wMSA4LjQxMSA1LjUxNiA4LjQxOCA1LjUxNmMuMDEgMCA5LjM0NiAxLjgzOCA5LjM1NCAxLjgzOGMuMDEgMCA5LjQ3OS0xLjc0IDkuNDg2LTEuNzRjLjAxIDAgOC4yOC01LjYxNCA4LjI4NS01LjYxNGwyODAuNTc2LTI4MC41ODJsMjgwLjYzNyAyODAuNjQxYy4wMS4wMSA4LjQxMiA1LjUxNiA4LjQxOCA1LjUxNmMuMDEgMCA5LjM0NiAxLjgzOCA5LjM1NCAxLjgzOGMuMDEgMCA5LjQ4LTEuNzQzIDkuNDg4LTEuNzQzYy4wMSAwIDguMjc2LTUuNjEgOC4yODEtNS42MWwzMC43MzUtMzAuNzNjLjAxLS4wMSA1LjQ3NS04LjEyNiA1LjQ4LTguMTI2YzAtLjAxIDEuODcxLTkuNTggMS44NzEtOS42NzZjMC0uMDEtMS44NjktOS4zODUtMS44NzMtOS4zODVjMCAwLTUuNDcyLTguNDE4LTUuNDc4LTguNDE4bC0yODAuNjA2LTI4MC42MTFsMjgwLjYwOC0yODAuNjA0Yy4wMSAwIDUuNDczLTguMTI3IDUuNDc4LTguMTI3YzAtLjAxIDEuODcxLTkuNTc4IDEuODcxLTkuNTc4YzAtLjAyLTEuODY4LTkuMzg1LTEuODctOS4zODVjMC0uMDEtNS42MDYtOC4zMjItNS42MTItOC4zMjJsLTMwLjczNS0zMC43MzhjLS4wMSAwLTguMTQzLTUuNTE0LTguMTUtNS41MTRjLS4wMSAwLTkuMzQ1LTEuODQtOS4zNTMtMS44NGMtLjAxIDAtOS42MTMgMS44NC05LjYyIDEuODRjLS4wMSAwLTguMTQ1IDUuNTE0LTguMTUgNS41MTRsLTI4MC42MTMgMjgwLjYxM2wtMjgwLjczOS0yODAuNzQ4di0uMDg4Yy0uMDEgMC04LjI3OC01LjMyLTguMjg1LTUuMzJjLS4wMSAwLTkuMzQtMS44MzctOS4zNTEtMS44MzhoLS4wMDJ6IiBmaWxsPSJibGFjayIvPjwvc3ZnPg==" icon="images/taskgif.gif"/>
</mxDefaultToolbar>

但它不显示图像我只是得到图像图标而不是图像

标签： xmlsvgmxgraph

解决方案

  1. 对于 js 部分，您可以为其创建自己的样式。

const style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys1.svg';
style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';
graph.getStylesheet().putCellStyle('svg1', style); // name style

const v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'svg1');

这个对我有用。用创造自己的风格看代码。

  1. 对于 XML 部分

在config/wfeditor-commons.xml您可以更改当前项目，如示例（symbol等）或创建新的

<add as="symbol">
    <Symbol label="Symbol" description="" href="">
        <mxCell vertex="1" style="symbol;image=images/symbols/my.svg">      
            <mxGeometry as="geometry" width="32" height="32"/>
        </mxCell>
    </Symbol>
</add>

推荐阅读