微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

带有端口的 SVG 节点形状

如何解决带有端口的 SVG 节点形状

我正在使用 SVG 文档作为节点形状创建 Graphviz 图。我想为该形状的部分分配端口标识符,然后定义在端口开始或结束的边。这可能吗?

到目前为止,我已经有了这个 SVG 文档:

$ cat node.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-Syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="80.073914mm"
   height="50.37672mm"
   viewBox="0 0 80.073914 50.37672"
   version="1.1"
   id="svg1069"
   inkscape:version="1.0.2 (1.0.2+r75+1)"
   sodipodi:docname="node.svg">
 <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-44.44631,-39.799372)">
    <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="44.54631"
       y="39.899372" />
    <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="54.928062"
       y="50.225788"
       PORT="port1" />
    <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="98.100449"
       y="68.813545"
       PORT="port2" />
  </g>
</svg>

还有这张图:

$ cat test.dot
digraph test {
    node [image="node.svg",shape=none]
    h1
    h2

    h1:port1 -> h2:port1
}

dot 产生以下输出

$ dot test.dot -Tsvg -o test.svg
Warning: node h1,port port1 unrecognized
Warning: node h2,port port1 unrecognized

SVG 图像正确用作节点形状,但边缘只是在两个节点的轮廓之间,而不是节点上的端口。我还尝试使用 port 而不是 PORT 作为属性名称

解决方法

简单的回答:不。 Graphviz 不允许通过 SVG 自定义节点(但一个好主意)
替代方案:

  • 将此函数添加到代码库中(只是说)
  • 使用您的 SVG 节点,但自己绘制自定义边。直边很容易。如果您需要重复,也许这可以自动化。
  • 您的节点非常简单。将其重新创建为集群内的两个矩形。定义端口,点将完成剩下的工作。
  • 将您的节点重新创建为一个类似 HTML 的节点。再次定义您的端口并让 dot 接管。

以下是关于自定义节点形状的更多信息:https://www.graphviz.org/faq/#FaqCustShape

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。