组态图实现原理：用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.组态图源码
<html>
<head>
<style>
.water {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: run 10s linear infinite;
}
@keyframes run {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 20, 5;;
}
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1612" height="1088">
<g>
<g id="a3b5534" name="image" transform="translate(182,292.58444788302415) rotate(88.95837332399003,0,0) translate(-182,-292.58444788302415)">
<g>
<image width="164.09849699165773" height="14.853743249226454" preserveAspectRatio="none" transform="translate(99.95075150417114, 285.1575762584109)" xlink:href="http://topology.le5le.com/image/Short horizontal pipeorange_b8c56e3b5fee5719.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="24224e7e" name="image">
<g>
<image width="211" height="178" preserveAspectRatio="none" transform="translate(93, 367.5)" xlink:href="http://topology.le5le.com/image/Tank 2_def075f74798b3ce.png" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="90abcb4" name="image">
<g>
<image width="29" height="27" preserveAspectRatio="none" transform="translate(174.5, 194.08444788302415)" xlink:href="http://topology.le5le.com/image/Right angle 21_ed27f4ecff6903e9.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="7f1614f" name="image">
<g>
<image width="104" height="14" preserveAspectRatio="none" transform="translate(199.5, 193.58444788302415)" xlink:href="http://topology.le5le.com/image/Short horizontal pipeorange_b8c56e3b5fee5719.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="c468025" name="image">
<g>
<image width="83" height="58" preserveAspectRatio="none" transform="translate(271, 160.08444788302415)" xlink:href="http://topology.le5le.com/image/Hand valve - horizontal_3bd8f1a1b6ef765d.png" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="765ece" name="image">
<g>
<image width="104" height="14" preserveAspectRatio="none" transform="translate(353, 194.08444788302415)" xlink:href="http://topology.le5le.com/image/Short horizontal pipeorange_b8c56e3b5fee5719.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="6854293" name="image">
<g>
<image width="92" height="57" preserveAspectRatio="none" transform="translate(380, 171.58444788302415)" xlink:href="http://topology.le5le.com/image/Horizontal pump 2 (left)_a70cfd34762baa7d.png" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="504d21d" name="image">
<g>
<image width="112" height="14" preserveAspectRatio="none" transform="translate(472, 177.08444788302415)" xlink:href="http://topology.le5le.com/image/Short horizontal pipeorange_b8c56e3b5fee5719.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="42e198f0" name="image" transform="translate(582,132.08444788302415) rotate(269.1109650472846,0,0) translate(-582,-132.08444788302415)">
<g>
<image width="112" height="14" preserveAspectRatio="none" transform="translate(526, 125.08444788302415)" xlink:href="http://topology.le5le.com/image/Short horizontal pipeorange_b8c56e3b5fee5719.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="8258529" name="image" transform="translate(631.9992908649032,82.1377023430694) rotate(358.47419176128756,0,0) translate(-631.9992908649032,-82.1377023430694)">
<g>
<image width="108.00141827019365" height="14.106508920090505" preserveAspectRatio="none" transform="translate(577.9985817298063, 75.08444788302415)" xlink:href="http://topology.le5le.com/image/Short horizontal pipeorange_b8c56e3b5fee5719.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="57456e23" name="image" transform="translate(672.1627681694769,88.1377023430694) rotate(88.8542371618249,0,0) translate(-672.1627681694769,-88.1377023430694)">
<g>
<image width="27.674463661046275" height="25.574883535088304" preserveAspectRatio="none" transform="translate(658.3255363389537, 75.35026057552525)" xlink:href="http://topology.le5le.com/image/Right angle 21_ed27f4ecff6903e9.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="2496f18" name="image">
<g>
<image width="113" height="171" preserveAspectRatio="none" transform="translate(615.6627681694769, 103.58444788302415)" xlink:href="http://topology.le5le.com/image/Stripper_36b463e45277cb4c.png" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="4286ad40" name="image" transform="translate(182,456.5) rotate(180.80692945510236,0,0) translate(-182,-456.5)">
<g>
<image width="73.73162752984226" height="167.77595947081625" preserveAspectRatio="none" transform="translate(145.13418623507886, 372.6120202645919)" xlink:href="http://topology.le5le.com/image/刻度_6910895566f65d6e.png" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="29963b08" name="square">
<path fill="#3f4a52ff" stroke="#222" paint-order="fill stroke markers" d=" M 177 375 L 218 375 L 218 536 L 177 536 L 177 375 Z" stroke-miterlimit="10" stroke-dasharray=""/>
</g>
<g id="3912088e" name="square">
<path fill="#65e931ff" stroke="#222" paint-order="fill stroke markers" d=" M 178.5 446 L 218.5 446 L 218.5 536 L 178.5 536 L 178.5 446 Z" stroke-miterlimit="10" stroke-dasharray=""/>
</g>
<g id="dffef6c" name="image" transform="translate(422,197.08444788302415) rotate(89.29268063145574,0,0) translate(-422,-197.08444788302415)">
<g>
<image width="19.425893235543924" height="43.86847503324927" preserveAspectRatio="none" transform="translate(412.28705338222807, 175.15021036639953)" xlink:href="http://topology.le5le.com/image/Tank with cutaway_603d8a3fa55f8ab9.png" target="_blank" rel="external nofollow" />
</g>
</g>
<g id="6f229bfb" name="image"/>
<g id="c3d9212" name="line" transform="translate(182,285.1575762584109) rotate(269.31793960682734,0,0) translate(-182,-285.1575762584109)">
<path fill="green" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 96.0858781781069 285.1575762584109 L 267.9141218218931 285.1575762584109" stroke-miterlimit="10" stroke-dasharray="" class="water" />
</g>
<g id="651f815" name="line" transform="translate(224.44359538727173,200.12507513160335) rotate(0.783134356923938,0,0) translate(-224.44359538727173,-200.12507513160335)">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 178.13512667393576 200.12507513160335 L 270.7520641006077 200.12507513160335" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g id="243fcb7" name="line" transform="translate(367.3804922252348,199.09783284613374) rotate(0.783134356923938,0,0) translate(-367.3804922252348,-199.09783284613374)">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 355.69181151483207 199.09783284613374 L 379.0691729356374 199.09783284613374" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g id="9498815" name="line" transform="translate(525.938681505346,184.61220392013513) rotate(0.783134356923938,0,0) translate(-525.938681505346,-184.61220392013513)">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 472.185584752148 184.61220392013513 L 579.691778258544 184.61220392013513" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g id="ab9a9c" name="line" from-id="9498815">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 562.1821989510504 185.10762106350361 L 562.1821989510504 185.10762106350361" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g id="1f4e843" name="line" from-id="9498815">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 542.1840671388371 184.834264114914 L 542.1840671388371 184.834264114914" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g id="4422d76" name="line" transform="translate(584,132.08444788302415) rotate(89.88462045125121,0,0) translate(-584,-132.08444788302415)">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 531.2638261946211 132.08444788302415 L 636.7361738053789 132.08444788302415" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g id="25b9958c" name="line" transform="translate(632,81.6377023430694) rotate(360,0,0) translate(-632,-81.6377023430694)">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 585.2638261946211 81.6377023430694 L 678.7361738053789 81.6377023430694" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g id="642037e5" name="line" transform="translate(679,89.19095680311466) rotate(89.81669052334887,0,0) translate(-679,-89.19095680311466)">
<path fill="none" stroke="green" stroke-width="3" paint-order="fill stroke markers" d=" M 667.6445333093127 89.19095680311466 L 690.3554666906873 89.19095680311466" stroke-miterlimit="10" stroke-dasharray="" class="water"/>
</g>
<g xmlns="http://www.w3.org/2000/svg" id="1183f33" name="image">
<g>
<image width="86" height="121" preserveAspectRatio="none" transform="translate(639, 143)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./oil.gif" target="_blank" rel="external nofollow" ></image>
</g>
</g>
<g xmlns="http://www.w3.org/2000/svg" id="920f5b6" name="text" text="12.3"><g><path fill="none" stroke="none"/><text fill="#3ce729ff" stroke="none" font-family=""Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial " font-size="12px" font-style="normal" font-weight="normal" text-decoration="normal" x="422.5" y="200.28571428571428" text-anchor="middle" dominant-baseline="central">12.3</text></g></g>
</g>
</svg>
</body>
</html>
7.组态图效果
