web组态学习——Le5le Topogy可视化绘图工具绘制组态图（二）

组态图实现原理：用svg（矢量图）来显示组态图，通过节点的Id来获取节点对象，实时更新节点的值，显示改变的数据。

组态图绘制工具：

Le5le Topogy可视化绘图工具网址：http://topology.le5le.com/workspace?id=5d4d725a6025d7704b113240

组态图片素材下载地址：https://download.csdn.net/download/yb305/12898241

组态图绘制：

1.打开Le5le Topogy可视化绘图工具，点击“我的图片”，可以上传所需要的的组态图片素材，尝试了不能上传svg格式的图片，这里传的是.png格式的图片。如图所示

2.点击"文件"新建文件，拖拽左侧图片，到右侧画布中，制作自己的组态图。

3.导出组态图为svg(矢量图)格式文件。

4.粘贴svg文件中的代码添加到自己的demo.html中，就能显示静态的组态图了

5.让组态图动起来，水或气体流动起来，这里用css的动画效果实现的，本例子中，用svg的stroke-dasharray 属性，将液体流做成虚线。

6.组态图源码

7.组态图效果