javascript - 我如何从图表中获取带有 ID 的 SVG？

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

有点像这样(对于给定的单元格，在用户从列表中选择一个项目之后):

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;                               `

到目前为止一切正常:我可以将 xml 保存在数据库中并检索它以在 grapheditor 中再次编辑它。

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

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

我想我应该创建一个自定义类型的元素而不是 object并以某种方式注册一个新的翻译，这将使它成为 SVG <g> ，我在哪里转换 my_ID变成一个自定义属性，最好是一个类。因此我以后可以识别和修改那些 <g>节点。关于如何真正做到这一点的任何指示？

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'));
}