Question

当前，我正在使用mxGraph编辑图形并根据https://github.com/jgraph/mxgraph/blob/master/java/examples/com/mxgraph/examples/web/resources/export.html吐出SVG

在编辑图形时，我将数据添加到重新标记的单元格中，并基本上使用ID对其进行标记，就像在EditDataDialog中一样：https://github.com/jgraph/mxgraph/blob/f4ec51f7049a725e32f71a5d1811790d92259716/javascript/examples/grapheditor/www/js/Dialogs.js#L1314

这样（对于给定的单元格以及用户从列表中选择一个项目之后）：

function login(player, command)
if getAdmin then
    if not getElementData(thePlayer, "player:admin") then
        setElementData(thePlayer, "player:admin")
        triggerClientEvent("create:noti", thePlayer, "Zalogowałeś się na duty")
    else
        if getElementData(thePlayer, "player:admin") then
            player:removedata("player:admin")
            triggerClientEvent("create:noti", thePlayer, "Wylogowałeś się z duty")
        end
    end

到目前为止，这种方法工作正常：我可以将xml保存在数据库中，然后检索它以在grapheditor中再次对其进行编辑。

我将提取的SVG用作预览图像并用于只读访问，但是SVG不包含我使用mxgraph-xml标记的ID。我需要能够识别SVG中的节点以向其中添加事件（在mxgraph之外）

我一直在遍历代码，但没有找到实际创建SVG节点的位置/方式。

我想我应该创建一个自定义类型的元素而不是const newLabel = listItems[listItems.selectedIndex].text; //create a container object for the label and the additional data var doc = mxUtils.createXmlDocument(); var obj = doc.createElement('object'); obj.setAttribute('label', newLabel || ''); //save extra data obj.setAttribute("my_ID", listItems[listItems.selectedIndex].dataset["recId"]); cell.value = obj; `并以某种方式注册一个新的翻译，这将使其成为SVG object，其中我将<g>转换为自定义元素属性，最好是一个类。因此，我以后可以识别和修改那些my_ID节点。请问有关如何真正做到这一点的任何指示？

Answer 1

好的，我自己找到的。

在mxImageExport.prototype.drawCellState的末尾，在this.drawShape(state, canvas);和this.drawText(state, canvas);之间，我抓取state.cell.value，过滤出我想要的属性，并将其添加到像这样的SVG。

if ( 
    (state.cell.value !== undefined) && 
    (state.cell.value.hasAttribute('my_ID'))
){                  
    canvas.root.lastElementChild.setAttribute('data-myid',
        state.cell.value.getAttribute('my_ID'));
}

如何从图中获取具有ID的SVG？

1 个答案: