如何从图中获取带有 ID 的 SVG？答案

【问题标题】：How do i get an SVG with IDs from the graph?如何从图中获取带有 ID 的 SVG？
【发布时间】：2018-08-24 03:48:54
【问题描述】：

目前我正在使用 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 保存在数据库中并检索它以在图形编辑器中再次对其进行编辑。

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

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

我想我应该创建一个自定义类型的元素而不是 object 并以某种方式注册一个新的翻译，这将使其成为 SVG <g>，我将 my_ID 转换为自定义属性，理想情况下是一个类。因此，我以后可以识别和修改那些<g> 节点。请问有什么具体的操作方法吗？

【问题讨论】：

标签： javascript svg mxgraph

【解决方案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'));
}

【讨论】：