【Draw.io】让Draw.io导出的SVG格式图片包含自定义属性信息

前景提要

Draw.io重度用户一枚
这个Draw.io是一个极其好用的跨平台流程图绘制软件。
它保存的文件格式可以输出成SVG格式.
在这里插入图片描述
这个是基本功能了,没啥好说的
导出之后得到画的图片的SVG代码
SVG代码,也没啥好说的,一种矢量图片格式。

但是,我突然有一个想法

如果可以通过代码控制生成的SVG代码中的特定属性,修改属性,然后展示出来,那这个Draw.io不就是一个极其好用,易用的组态设计器了

然后我试了试,还真是可以的,起码Draw.io导出的简单的SVG图像是可以通过代码是识别出来的,但是正常情况下,导出的SVG图像中的元素它无法携带一些自定义的属性,我希望通过识别自定义的属性,然后特别的修改指定SVG元素对象的属性,然后特定的展示出来。

元素的自定义属性功能

估计编辑数据这个功能,都很少有人发现他的作用
在这里插入图片描述
用户其实是可以对任何的元素添加自定义属性和值的
每一个元素还有一个自己唯一的ID
在这里插入图片描述
然后看到这个占位符勾选不,这个也是可以很神奇的功能
如果我把它勾选,点应用。
在这里插入图片描述
似乎什么也没发生

但是如果我在对应的元素里面,把自定义的属性输入进去,并且用%包围,输出完,点击空白的地方,离开这个元素就会发生神奇的事情,
在这里插入图片描述
我们自己定义的属性对应的值就会以文本的方式显示在刚刚输出的%Test%中,替换掉Test
在这里插入图片描述

自定义属性的导出功能

正常情况下,我们设计好的图像,导出SVG,他是不包含你自己定义的属性的,譬如刚刚的Test.
它就只有这个矩形

但是,其实Draw.io本身有这个功能,可以将自定义的属性,ID等等信息导出到SVG文件中,只是这个功能藏得很深

找到这个插件设置,在其他里
在这里插入图片描述
单击打开,正常情况下一般人都不知道这个,应该都是无插件
然后点击添加,弹出这个,应该是有内部插件和外部插件
请添加图片描述
我们希望使用在内部插件里面,请找到svgdata,这个插件应该目前下载到得Draw.io应该都有请添加图片描述
点击确定,之后点击应用,重启软件,生效
之后,Draw.io导出得SVG图片就会带上自定义的属性了
有了这些属性,配合上它Draw.io导出的XML格式的元素之间的连接关系,就可以提取到生成图片必要的信息,通过代码来控制其中某些元素,并展示出来了
在这里插入图片描述
它还有很多其他的插件,感觉不得了,应该也可以自己写插件,但是这个就不在本文的讨论范围之内了
在这里插入图片描述

参考链接:
https://drawio.freshdesk.com/support/solutions/articles/16000056430-list-of-diagrams-net-plugins

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值