ZNYW.20180201_02_YunWeiJianXiu_ShouYe.svg

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/DrMess/p/8397866.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用SVG绘制配电系统布局图的方法，详细展示了如何通过SVG元素定义各种配电柜的状态及其连接方式，包括进线柜、计量柜、压变柜等关键设备的位置和状态标识。

1、

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200" height="900" viewBox="0 0 1200 900" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

    <style type="text/css">
    <![CDATA[
    <!--

    *
    {
        stroke:black;
        stroke-width:1px;
        fill:none;
    }

    text
    {
        stroke:black;
        stroke-width:1px;
        fill: black;
    }
    -->
    ]]>
    </style>

    <script type="text/javascript" >
    <![CDATA[
    <!--
        window.onload = function()
        {
        };
    -->
    ]]>
    </script>



    <defs>
    <symbol id="Yuan2" viewBox="0 0 150 250">
        <circle cx="75" cy="80" r="45" />
        <circle cx="75" cy="130" r="45"/>
    </symbol>
    </defs>

<rect x="0" y="0" width="100%" height="100%" style="fill:none; stroke-width:2ps; stroke:black;"/>

    <rect x="100" y="100" width="100" height="200" />
    <rect x="220" y="100" width="100" height="200" />
    <rect x="340" y="100" width="100" height="200" />
    <rect x="460" y="100" width="100" height="200" />
    <rect x="580" y="100" width="100" height="200" />

    <rect x="730" y="100" width="150" height="250" />
    <rect x="900" y="100" width="150" height="250" />
<!--
    <use x="730" y="100" width="150" height="250" style="fill-opacity:0.5; fill:blue; stroke:black;" xlink:href="#Yuan2"  />
-->
    <circle cx="805" cy="180" r="45" style="fill:blue; fill-opacity:0.5;"/>
    <circle cx="805" cy="230" r="45" style="fill:blue; fill-opacity:0.5;"/>

    <circle cx="975" cy="180" r="45" style="fill:blue; fill-opacity:0.5;"/>
    <circle cx="975" cy="230" r="45" style="fill:blue; fill-opacity:0.5;"/>

    <text x="10" y="345" >盘柜状态</text>

<!--进线柜-->
    <text x="150" y="150" style="text-anchor: middle;"><a>进线柜</a></text>
    <rect x="100" y="330" width="100" height="20" style="background-color: blue;"/>
    <circle cx="130" cy="340" r="5" />
    <circle cx="170" cy="340" r="5" />

<!--计量柜-->
    <text x="270" y="150" style="text-anchor: middle;"><a>计量柜</a></text>
    <rect x="220" y="330" width="100" height="20" style="background-color: blue;"/>
    <circle cx="250" cy="340" r="5" />
    <circle cx="290" cy="340" r="5" />

<!--压变柜-->
    <text x="390" y="150" style="text-anchor: middle;"><a>压变柜</a></text>
    <rect x="340" y="330" width="100" height="20" style="background-color: blue;"/>
    <circle cx="370" cy="340" r="5" />
    <circle cx="410" cy="340" r="5" />

<!--出线柜1-->
    <text x="510" y="150" style="text-anchor: middle;"><a>出线柜1</a></text>
    <rect x="460" y="330" width="100" height="20" style="background-color: blue;"/>
    <circle cx="490" cy="340" r="5" />
    <circle cx="530" cy="340" r="5" />

<!--出线柜2-->
    <text x="630" y="150" style="text-anchor: middle;"><a>出线柜2</a></text>
    <rect x="580" y="330" width="100" height="20" style="background-color: blue;"/>
    <circle cx="610" cy="340" r="5" />
    <circle cx="650" cy="340" r="5" />

<!--1#变-->
    <text x="805" y="330" style="text-anchor: middle;"><a>1#变</a></text>
    <rect x="755" y="370" width="100" height="20" style="background-color: blue;"/>
    <circle cx="785" cy="380" r="5" />
    <circle cx="825" cy="380" r="5" />
<!--特种变-->
    <text x="975" y="330" style="text-anchor: middle;"><a>特种变</a></text>
    <rect x="925" y="370" width="100" height="20" style="background-color: blue;"/>
    <circle cx="955" cy="380" r="5" />
    <circle cx="995" cy="380" r="5" />




    <rect x="100" y="450" width="80" height="200" />
    <rect x="200" y="450" width="80" height="200" />
    <rect x="300" y="450" width="80" height="200" />
    <rect x="400" y="450" width="80" height="200" />
    <rect x="500" y="450" width="80" height="200" />
    <rect x="600" y="450" width="80" height="200" />
    <rect x="700" y="450" width="80" height="200" />
    <rect x="800" y="450" width="80" height="200" />

    <text x="10" y="695" >盘柜状态</text>
<!--总柜-->
    <text x="140" y="500" style="text-anchor: middle;"><a>总柜</a></text>
    <rect x="100" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="120" cy="690" r="5" />
    <circle cx="160" cy="690" r="5" />
<!--电容柜1-->
    <text x="240" y="500" style="text-anchor: middle;"><a>电容柜1</a></text>
    <rect x="200" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="220" cy="690" r="5" />
    <circle cx="260" cy="690" r="5" />
<!--电容柜2-->
    <text x="340" y="500" style="text-anchor: middle;"><a>电容柜2</a></text>
    <rect x="300" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="320" cy="690" r="5" />
    <circle cx="360" cy="690" r="5" />
<!--出线柜1-->
    <text x="440" y="500" style="text-anchor: middle;"><a>出线柜1</a></text>
    <rect x="400" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="420" cy="690" r="5" />
    <circle cx="460" cy="690" r="5" />
<!--出线柜2-->
    <text x="540" y="500" style="text-anchor: middle;"><a>出线柜2</a></text>
    <rect x="500" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="520" cy="690" r="5" />
    <circle cx="560" cy="690" r="5" />
<!--出线柜3-->
    <text x="640" y="500" style="text-anchor: middle;"><a>出线柜3</a></text>
    <rect x="600" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="620" cy="690" r="5" />
    <circle cx="660" cy="690" r="5" />
<!--出线柜4-->
    <text x="740" y="500" style="text-anchor: middle;"><a>出线柜4</a></text>
    <rect x="700" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="720" cy="690" r="5" />
    <circle cx="760" cy="690" r="5" />
<!--直流屏-->
    <text x="840" y="500" style="text-anchor: middle;"><a>直流屏</a></text>
    <rect x="800" y="680" width="80" height="20" style="background-color: blue;"/>
    <circle cx="820" cy="690" r="5" />
    <circle cx="860" cy="690" r="5" />


</svg>