SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
<head>
<title>svg</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="610" height="570">
            <defs>
                <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="10" refy="6" orient="auto">
                    <path d='M2,2 L2,11 L10,6 L2,2' style='fill:black' />
                </marker>
            </defs>
            <defs>
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />
                    <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
                </filter>
            </defs>
            <defs>
                <filter id="f2" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />
                    <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
                </filter>
            </defs>

            <!--slave1-->
            <g fill="#E0E0E0" stroke="black" stroke-width="1" filter="url(#f2)" >
                <circle id="slave101" cx="107" cy="72" r="9" />
                <circle id="slave102" cx="158" cy="72" r="9" />
                <circle id="slave103" cx="107" cy="112" r="9" />
                <circle id="slave104" cx="158" cy="112" r="9" />
            </g>
            <text x="97" y="47" fill="#003399" font-size="15" font-family="黑体">工作节点 1</text>

            <!--master-->
            <g fill="#E0E0E0" stroke="black" stroke-width="1" filter="url(#f2)" >
                <circle id="master01" cx="380" cy="280" r="9" />
                <circle id="master02" cx="420" cy="280" r="9" />
                <circle id="master03" cx="460" cy="280" r="9" />
                <circle id="master04" cx="500" cy="280" r="9" />
                <circle id="master05" cx="380" cy="320" r="9" />
                <circle id="master06" cx="420" cy="320" r="9" />
                <circle id="master07" cx="460" cy="320" r="9" />
                <circle id="master08" cx="500" cy="320" r="9" />
            </g>
            <text x="410" y="239" fill="#003399" font-size="16" font-family="黑体">管理节点</text>

            <!--slave2-->
            <g fill="#E0E0E0" stroke="black" stroke-width="1" filter="url(#f2)" >
                <circle id="slave201" cx="435" cy="75" r="9" />
                <circle id="slave202" cx="480" cy="75" r="9" />
                <circle id="slave203" cx="525" cy="75" r="9" />
                <circle id="slave204" cx="570" cy="75" r="9" />
                <circle id="slave205" cx="435" cy="115" r="9" />
                <circle id="slave206" cx="480" cy="115" r="9" />
                <circle id="slave207" cx="525" cy="115" r="9" />
                <circle id="slave208" cx="570" cy="115" r="9" />
            </g>
            <text x="465" y="48" fill="#003399" font-size="15" font-family="黑体">工作节点 2</text>

            <!--slave3-->
            <g fill="#E0E0E0" stroke="black" stroke-width="1" filter="url(#f2)" >
                <circle id="slave301" cx="65" cy="255" r="9" />
                <circle id="slave302" cx="110" cy="255" r="9" />
                <circle id="slave303" cx="155" cy="255" r="9" />
                <circle id="slave304" cx="200" cy="255" r="9" />
                <circle id="slave305" cx="65" cy="295" r="9" />
                <circle id="slave306" cx="110" cy="295" r="9" />
                <circle id="slave307" cx="155" cy="295" r="9" />
                <circle id="slave308" cx="200" cy="295" r="9" />
            </g>
            <text x="100" y="229" fill="#003399" font-size="15" font-family="黑体">工作节点 3</text>

            <!--slave4-->
            <g fill="#E0E0E0" stroke="black" stroke-width="1" filter="url(#f2)" >
                <circle id="slave401" cx="40" cy="460" r="9" />
                <circle id="slave402" cx="80" cy="460" r="9" />
                <circle id="slave403" cx="120" cy="460" r="9" />
                <circle id="slave404" cx="160" cy="460" r="9" />
                <circle id="slave405" cx="200" cy="460" r="9" />
                <circle id="slave406" cx="240" cy="460" r="9" />

                <circle id="slave408" cx="40" cy="495" r="9" />
                <circle id="slave409" cx="80" cy="495" r="9" />
                <circle id="slave410" cx="120" cy="495" r="9" />
                <circle id="slave411" cx="160" cy="495" r="9" />
                <circle id="slave412" cx="200" cy="495" r="9" />
                <circle id="slave413" cx="240" cy="495" r="9" />

                <circle id="slave415" cx="80" cy="530" r="9" />
                <circle id="slave416" cx="120" cy="530" r="9" />
                <circle id="slave407" cx="160" cy="530" r="9" />
                <circle id="slave414" cx="200" cy="530" r="9" />
            </g>
            <text x="98" y="429" fill="#003399" font-size="15" font-family="黑体">工作节点 4</text>

            <!--slave5-->
            <g fill="#E0E0E0" stroke="black" stroke-width="1" filter="url(#f2)" >
                <circle id="slave501" cx="432" cy="480" r="9" />
                <circle id="slave502" cx="477" cy="480" r="9" />
                <circle id="slave503" cx="522" cy="480" r="9" />
                <circle id="slave504" cx="567" cy="480" r="9" />
                <circle id="slave505" cx="432" cy="515" r="9" />
                <circle id="slave506" cx="477" cy="515" r="9" />
                <circle id="slave507" cx="522" cy="515" r="9" />
                <circle id="slave508" cx="567" cy="515" r="9" />
            </g>
            <text x="465" y="449" fill="#003399" font-size="15" font-family="黑体">工作节点 5</text>
            <!--rect-->
            <g fill="white" stroke="black" fill-opacity="0.0">
                <rect id="slave1" x="68" y="20" width="130" height="115" rx="3" stroke="#66CC99" stroke-width="2"
                      filter="url(#f1)"></rect>
                <rect id="slave4" x="10" y="400" width="260" height="155" rx="3" stroke="#66CC99" stroke-width="2"
                      filter="url(#f1)"></rect>
                <rect id="master" x="350" y="210" width="180" height="140" rx="3" stroke="#66CC99" stroke-width="2"
                      filter="url(#f1)"></rect>
                <rect id="slave2" x="400" y="20" width="200" height="120" rx="3" stroke="#66CC99" stroke-width="2"
                      filter="url(#f1)"></rect>
                <rect id="slave3" x="35" y="200" width="200" height="120" rx="3" stroke="#66CC99" stroke-width="2"
                      filter="url(#f1)"></rect>
                <rect id="slave5" x="400" y="420" width="200" height="120" rx="3" stroke="#66CC99" stroke-width="2"
                      filter="url(#f1)"></rect>
            </g>
            <!--line-->
            <g  stroke="black" stroke-width="3">
                <!-- 线1 -->
                <line x1="210" y1="120" x2="390" y2="205" style="stroke:#181818; stroke-width:2" />
                <!-- 线4 -->
                <line x1="390" y1="360" x2="280" y2="490" style="stroke:#181818; stroke-width:2" />
                <!-- 线3 -->
                <line x1="345" y1="280" x2="245" y2="265" style="stroke:#181818; stroke-width:2" />
                <!-- 线2 -->
                <line x1="440" y1="205" x2="500" y2="150" style="stroke:#181818; stroke-width:2"  />
                <!-- 线5 -->
                <line x1="460" y1="360" x2="520" y2="415" style="stroke:#181818; stroke-width:2"  />

                <!-- 隔开线1 -->
                <line x1="73" y1="54" x2="196" y2="54" style="stroke:#CC99FF; stroke-width:2" />
                <!-- 隔开线2 -->
                <line x1="406" y1="54" x2="600" y2="54" style="stroke:#CC99FF; stroke-width:2"/>
                <!-- 隔开线3 -->
                <line x1="40" y1="238" x2="234" y2="238" style="stroke:#CC99FF; stroke-width:2"/>
                <!-- 隔开线master -->
                <line x1="356" y1="250" x2="530" y2="250" style="stroke:#CC99FF; stroke-width:2"/>
                <!-- 隔开线4 -->
                <line x1="15" y1="438" x2="269" y2="438" style="stroke:#CC99FF; stroke-width:2"/>
                <!-- 隔开线5 -->
                <line x1="405" y1="458" x2="600" y2="458" style="stroke:#CC99FF; stroke-width:2"/>
            </g>
        </svg>
</body>

</html>