自定义SVG作为Graphviz节点形状时如何定义端口实现边连接

结论 #

你提出的需求完全可实现，当前报错是因为SVG节点的引用方式不符合Graphviz端口识别的要求。

错误原因分析 #

直接通过node [image="node.svg", shape=none]的方式引用SVG时，Graphviz仅将SVG作为普通的节点附着图像处理，不会解析SVG内部的自定义属性，因此无法识别你定义的port端口。

具体修改步骤 #

1. 调整SVG文件 #

• 移除g元素的transform偏移属性，将内部rect的坐标换算为相对于SVG根元素viewBox的绝对坐标，避免端口定位偏移
• 给需要作为端口的元素添加*小写port*属性，不要用大写PORT

修改后的node.svg参考：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   width="80.073914mm"
   height="50.37672mm"
   viewBox="0 0 80.073914 50.37672"
   version="1.1"
   id="svg1069">
  <!-- 外框矩形 -->
  <rect
     style="fill:#ffffff;stroke:#000000;stroke-width:0.2;stroke-linecap:round;stroke-dasharray:1.2, 0.2"
     id="rect1071"
     width="79.873917"
     height="50.17672"
     x="0.1"
     y="0.1" />
  <!-- port1 矩形，坐标已去除transform偏移 -->
  <rect
     style="fill:#ffffff;stroke:#000000;stroke-width:0.2;stroke-linecap:round;stroke-dasharray:1.2, 0.2"
     id="rect1073"
     width="14.489976"
     height="13.654758"
     x="10.481752"
     y="10.426416"
     port="port1" />
  <!-- port2 矩形，坐标已去除transform偏移 -->
  <rect
     style="fill:#ffffff;stroke:#000000;stroke-width:0.2;stroke-linecap:round;stroke-dasharray:1.2, 0.2"
     id="rect1075"
     width="17.208607"
     height="13.1411"
     x="53.654139"
     y="29.014173"
     port="port2" />
</svg>

2. 调整dot文件配置 #

将节点的属性从image+shape=none改为shape=custom+shapefile，这是Graphviz识别自定义形状内部端口的必填配置：

digraph test {
    node [shape=custom, shapefile="node.svg"]
    h1
    h2

    h1:port1 -> h2:port2
}

3. 重新生成SVG #

再次执行dot命令：

dot test.dot -Tsvg -o test.svg

此时不会再出现端口未识别的警告，边会自动连接到对应端口矩形的中心位置。

内容的提问来源于stack exchange，提问作者Tom