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" height="820" width="1480">
<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="10" dy="10" />
      <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="white" stroke="black" stroke-width="3" filter="url(#f2)" >
     <circle id="slave101" cx="120" cy="130" r="15" />
     <circle id="slave102" cx="120" cy="180" r="15" />
     <circle id="slave103" cx="180" cy="130" r="15" />
     <circle id="slave104" cx="180" cy="180" r="15" />
  </g>
  <text x="80" y="80" fill="blue" font-size="20">工作节点11</text>

    <!--master-->
  <g fill="white" stroke="black" stroke-width="3" filter="url(#f2)" >
     <circle id="master01" cx="500" cy="320" r="15" />
     <circle id="master02" cx="560" cy="320" r="15" />
     <circle id="master03" cx="620" cy="320" r="15" />
     <circle id="master04" cx="680" cy="320" r="15" />
     <circle id="master05" cx="500" cy="380" r="15" />
     <circle id="master06" cx="560" cy="380" r="15" />
     <circle id="master07" cx="620" cy="380" r="15" />
     <circle id="master08" cx="680" cy="380" r="15" />
  </g>
  <text x="480" y="240" fill="blue" font-size="30">管理节点</text>

   <!--slave2-->
  <g fill="white" stroke="black" stroke-width="3" filter="url(#f2)" >
     <circle id="slave201" cx="1100" cy="130" r="15" />
     <circle id="slave202" cx="1170" cy="130" r="15" />
     <circle id="slave203" cx="1240" cy="130" r="15" />
     <circle id="slave204" cx="1310" cy="130" r="15" />
     <circle id="slave205" cx="1100" cy="180" r="15" />
     <circle id="slave206" cx="1170" cy="180" r="15" />
     <circle id="slave207" cx="1240" cy="180" r="15" />
     <circle id="slave208" cx="1310" cy="180" r="15" />
  </g>
  <text x="1080" y="80" fill="blue" font-size="20" >工作节点2</text>

     <!--slave3-->
  <g fill="white" stroke="black" stroke-width="3" filter="url(#f2)" >
     <circle id="slave301" cx="1100" cy="430" r="15" />
     <circle id="slave302" cx="1170" cy="430" r="15" />
     <circle id="slave303" cx="1240" cy="430" r="15" />
     <circle id="slave304" cx="1310" cy="430" r="15" />
     <circle id="slave305" cx="1100" cy="480" r="15" />
     <circle id="slave306" cx="1170" cy="480" r="15" />
     <circle id="slave307" cx="1240" cy="480" r="15" />
     <circle id="slave308" cx="1310" cy="480" r="15" />
  </g>
  <text x="1080" y="380" fill="blue" font-size="20" >工作节点3</text>

   <!--slave4-->
  <g fill="white" stroke="black" stroke-width="3" filter="url(#f2)" >
     <circle id="slave401" cx="100" cy="690" r="15" />
     <circle id="slave402" cx="160" cy="690" r="15" />
     <circle id="slave403" cx="220" cy="690" r="15" />
     <circle id="slave404" cx="280" cy="690" r="15" />
     <circle id="slave405" cx="340" cy="690" r="15" />
     <circle id="slave406" cx="400" cy="690" r="15" />
     <circle id="slave407" cx="460" cy="690" r="15" />
     <circle id="slave408" cx="520" cy="690" r="15" />
     <circle id="slave409" cx="100" cy="750" r="15" />
     <circle id="slave410" cx="160" cy="750" r="15" />
     <circle id="slave411" cx="220" cy="750" r="15" />
     <circle id="slave412" cx="280" cy="750" r="15" />
     <circle id="slave413" cx="340" cy="750" r="15" />
     <circle id="slave414" cx="400" cy="750" r="15" />
     <circle id="slave415" cx="460" cy="750" r="15" />
     <circle id="slave416" cx="520" cy="750" r="15" />
  </g>
  <text x="80" y="650" fill="blue" font-size="20">工作节点4</text>

   <!--slave5-->
  <g fill="white" stroke="black" stroke-width="3" filter="url(#f2)" >
     <circle id="slave501" cx="700" cy="690" r="15" />
     <circle id="slave502" cx="780" cy="690" r="15" />
     <circle id="slave503" cx="860" cy="690" r="15" />
     <circle id="slave504" cx="940" cy="690" r="15" />
     <circle id="slave505" cx="700" cy="750" r="15" />
     <circle id="slave506" cx="780" cy="750" r="15" />
     <circle id="slave507" cx="860" cy="750" r="15" />
     <circle id="slave508" cx="940" cy="750" r="15" />
  </g>
  <text x="680" y="650" fill="blue" font-size="20">工作节点5</text>
  <!--rect-->
  <g fill="white" stroke="black" fill-opacity="0.0">
      <rect id="slave1" x="60" y="40" width="180" height="180" rx="5" stroke="green" stroke-width="3"
   filter="url(#f1)"></rect>
      <rect id="slave4" x="60" y="600" width="500" height="200" rx="5" stroke="green" stroke-width="3"
   filter="url(#f1)"></rect>
      <rect id="master" x="460" y="200" width="260" height="260" rx="5" stroke="green" stroke-width="3"
   filter="url(#f1)"></rect>
      <rect id="slave2" x="1060" y="40" width="300" height="180" rx="5" stroke="green" stroke-width="3"
   filter="url(#f1)"></rect>
      <rect id="slave3" x="1060" y="340" width="300" height="180" rx="5" stroke="green" stroke-width="3"
   filter="url(#f1)"></rect>
      <rect id="slave5" x="650" y="600" width="400" height="200" rx="5" stroke="green" stroke-width="3"
   filter="url(#f1)"></rect>
  </g>
  <!--line-->
    <g  stroke="black" stroke-width="3">
       <line x1="240" y1="130" x2="460" y2="200" />
       <line x1="460" y1="460" x2="310" y2="600" />
       <line x1="720" y1="460" x2="900" y2="600" />
       <line x1="720" y1="200" x2="1060" y2="70" />
       <line x1="720" y1="350" x2="1060" y2="350" />
   </g>

     <rect x="1180" y="600" width="220" height="200" rx="5" fill="white"  stroke-width="3" fill-opacity="0.0"></rect>
    
    <g fill="black">
    <text x="1200" y="650" fill="red" font-size="30">注解:</text>
    <circle cx="1320" cy="740" r="15" fill="white" />
    <rect x="1305" y="680" width="30" height="30" rx="5" fill="white"></rect>
    <text x="1240" y="750"  font-size="20">cpu:</text>
    <text x="1240" y="700"  font-size="20">节点:</text>
    <text x="1200" y="790"  font-size="20">发亮代表正在运行节点的CPU</text>
    </g>
</svg>
</body>

</html>