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

最新推荐文章于 2024-07-08 23:12:45 发布

yb305小白

最新推荐文章于 2024-07-08 23:12:45 发布

阅读量7.3k

点赞数 2

分类专栏： web组态文章标签： SVG 组态图动画效果 CSS stroke-dasharray

本文链接：https://blog.csdn.net/yb305/article/details/108881854

版权

web组态专栏收录该内容

3 篇文章 7 订阅

订阅专栏

组态图实现原理：用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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"/>
                    </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"></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="&quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, 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.组态图效果