我如何从图表中获取带有 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 之外）

我一直在浏览代码，但我没有找到 where/how SVG 节点实际创建。

我想我应该创建一个自定义类型的元素而不是 object 并以某种方式注册一个新的翻译，这将使它成为 SVG <g>，我将 my_ID 转换为自定义属性，最好是 class。因此我以后可以识别和修改那些 <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'));
}

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

How do i get an SVG with IDs from the graph?

javascript

svg

mxgraph