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="800" width="800">
<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>


 <!-- -----------------------------第一列（自上到下）-------------------------------------------   -->
  <!--circle-->
  <g fill="white" stroke="black">
     <circle id="A" cx="40" cy="40" r="20" />
     <circle id="B" cx="40" cy="140" r="20" />
     <circle id="C" cx="40" cy="240" r="20" /> 
     <circle id="D" cx="40" cy="340" r="20" />
     <circle id="E" cx="40" cy="440" r="20" />
     <circle id="F" cx="40" cy="540" r="20" />
     <circle id="G" cx="40" cy="640" r="20" />
     <circle id="H" cx="40" cy="740" r="20" />
  </g>

  <!--rect-->
  <g fill="white"" stroke="black">
      <rect id="t1" x="30" y="80" width="20" height="20" rx="5"></rect>
      <rect id="t2" x="30" y="180" width="20" height="20" rx="5"></rect>
      <rect id="t3" x="30" y="280" width="20" height="20" rx="5"></rect>
      <rect id="t4" x="30" y="380" width="20" height="20" rx="5"></rect>
      <rect id="t5" x="30" y="480" width="20" height="20" rx="5"></rect>
      <rect id="t6" x="30" y="580" width="20" height="20" rx="5"></rect>
      <rect id="t7" x="30" y="680" width="20" height="20" rx="5"></rect>
  </g>
  <!--line-->
  <g stroke="black">
      <line id="l1" x1="40" y1="60" x2="40" y2="80" marker-end='url(#markerArrow)'></line>
      <line id="l2" x1="40" y1="100" x2="40" y2="120"marker-end='url(#markerArrow)'></line>
      <line id="l3" x1="40" y1="160" x2="40" y2="180"marker-end='url(#markerArrow)'></line>
      <line id="l4" x1="40" y1="200" x2="40" y2="220"marker-end='url(#markerArrow)'></line>
      <line id="l5" x1="40" y1="260" x2="40" y2="280"marker-end='url(#markerArrow)'></line>
      <line id="l6" x1="40" y1="300" x2="40" y2="320"marker-end='url(#markerArrow)'></line>
      <line id="l7" x1="40" y1="360" x2="40" y2="380"marker-end='url(#markerArrow)'></line>
      <line id="l8" x1="40" y1="400" x2="40" y2="420"marker-end='url(#markerArrow)'></line>
      <line id="l9" x1="40" y1="460" x2="40" y2="480"marker-end='url(#markerArrow)'></line>
      <line id="l10" x1="40" y1="500" x2="40" y2="520"marker-end='url(#markerArrow)'></line>
      <line id="l11" x1="40" y1="560" x2="40" y2="580"marker-end='url(#markerArrow)'></line>
      <line id="l12" x1="40" y1="600" x2="40" y2="620"marker-end='url(#markerArrow)'></line>
      <line id="l13" x1="40" y1="660" x2="40" y2="680"marker-end='url(#markerArrow)'></line>
      <line id="l14" x1="40" y1="700" x2="40" y2="720"marker-end='url(#markerArrow)'></line>
  </g>
  <!-------文本------------->
  <g font-size="10" text-anchor="middle">
    <text x="40" y="42">Namelist</text>
    <text x="40" y="142">Cntrl_prmtrs</text>
    <text x="40" y="242">Open_all</text>
    <text x="40" y="342">Load_grid</text>
    <text x="40" y="442">SetUp_domain</text>
    <text x="40" y="542">Allocate_all</text>
    <text x="40" y="642">Coords_const</text>
    <text x="40" y="742">Grid_metrics</text>
  </g>
  <g font-size="10" text-anchor="middle">
    <text x="40" y="92">t1</text>
    <text x="40" y="192">t2</text>
    <text x="40" y="292">t3</text>
    <text x="40" y="392">t4</text>
    <text x="40" y="492">t5</text>
    <text x="40" y="592">t6</text>
    <text x="40" y="692">t7</text>
  </g>
  <!-- -------------------------------底部转折的t8-----------------------------------------   -->

  <g>
    <rect id="t8" x="80" y="730" width="20" height="20" fill="white" stroke="black" rx="5"></rect>
    <line x1="60" y1="740" x2="80" y2="740" stroke="black" marker-end='url(#markerArrow)'></line>
    <text x="90" y="742" font-size="10" text-anchor="middle">t8</text>
    <line x1="100" y1="740" x2="120" y2="740" stroke="black" marker-end='url(#markerArrow)'></line>
  </g>

   <!-- ----------------------------第二列（自下到上）--------------------------------------------   -->
    <!--circle-->
  <g fill="white" stroke="black">
     <circle id="I" cx="140" cy="740" r="20"/>
     <circle id="K" cx="140" cy="640" r="20" /> 
     <circle id="L" cx="140" cy="540" r="20" />
     <circle id="M" cx="140" cy="440" r="20" />
     <circle id="N" cx="140" cy="340" r="20" />
     <circle id="O" cx="140" cy="240" r="20" />

     <circle id="P" cx="140" cy="40" r="20" />
  </g>

     <!--rect-->
  <g fill="white" stroke="black">
      <rect id="t9" x="130" y="680" width="20" height="20" rx="5"></rect>
      <rect id="t10" x="130" y="580" width="20" height="20" rx="5"></rect>
      <rect id="t11" x="130" y="480" width="20" height="20" rx="5"></rect>
      <rect id="t12" x="130" y="380" width="20" height="20" rx="5"></rect>
      <rect id="t13" x="130" y="280" width="20" height="20" rx="5"></rect>
      
      <rect id="t14" x="125" y="120" width="30" height="30" rx="5"></rect>
  </g>
      <!--line-->
  <g stroke="black">
      <line id="l15" x1="140" y1="720" x2="140" y2="700" marker-end='url(#markerArrow)'></line>
      <line id="l16" x1="140" y1="680" x2="140" y2="660"marker-end='url(#markerArrow)'></line>
      <line id="l17" x1="140" y1="620" x2="140" y2="600"marker-end='url(#markerArrow)'></line>
      <line id="l18" x1="140" y1="580" x2="140" y2="560"marker-end='url(#markerArrow)'></line>
      <line id="l19" x1="140" y1="520" x2="140" y2="500"marker-end='url(#markerArrow)'></line>
      <line id="l20" x1="140" y1="480" x2="140" y2="460"marker-end='url(#markerArrow)'></line>
      <line id="l21" x1="140" y1="420" x2="140" y2="400"marker-end='url(#markerArrow)'></line>
      <line id="l22" x1="140" y1="380" x2="140" y2="360"marker-end='url(#markerArrow)'></line>
      <line id="l23" x1="140" y1="320" x2="140" y2="300"marker-end='url(#markerArrow)'></line>
      <line id="l24" x1="140" y1="280" x2="140" y2="260"marker-end='url(#markerArrow)'></line>

      <line id="l25" x1="130" y1="220" x2="130" y2="150"marker-end='url(#markerArrow)'></line>
      <line id="l28" x1="130" y1="120" x2="130" y2="60"marker-end='url(#markerArrow)'></line>

      <line id="l25" x1="150" y1="150" x2="150" y2="220"marker-end='url(#markerArrow)'></line>
      <line id="l28" x1="150" y1="60" x2="150" y2="120"marker-end='url(#markerArrow)'></line>
  </g>
  <!-------文本------------->
  <g font-size="10" text-anchor="middle">
    <text x="140" y="42">Bcond_gcn</text>
    <text x="140" y="142">t14</text>
    <text x="140" y="242">Advave_edge_gcn</text>
    <text x="140" y="342">Baropg</text>
    <text x="140" y="442">Advection_edge_gcn</text>
    <text x="140" y="542">Bcond_gcn</text>
    <text x="140" y="642">adjust2d3d</text>
    <text x="140" y="742">Botton_roughness</text>
  </g>
  <g font-size="10" text-anchor="middle">
    <text x="140" y="692">t9</text>
    <text x="140" y="592">t10</text>
    <text x="140" y="492">t11</text>
    <text x="140" y="392">t12</text>
    <text x="140" y="292">t13</text>
  </g>
  

   <!-- -------------------------------顶部转折的t15-----------------------------------------   -->

  <g>
    <rect id="t15" x="180" y="32" width="20" height="20" fill="white" stroke="black" rx="5"></rect>
    <line x1="160" y1="40" x2="180" y2="40" stroke="black" marker-end='url(#markerArrow)'></line>
    <text x="190" y="46" font-size="10" text-anchor="middle">t15</text>
    <line x1="200" y1="40" x2="220" y2="40" stroke="black" marker-end='url(#markerArrow)'></line>
  </g>

<!-- ----------------------------第三列（自上到下）--------------------------------------------   -->
    <!--circle-->
  <g fill="white" stroke="black">
     <circle id="Q" cx="240" cy="40" r="20" />
     <circle id="R" cx="240" cy="140" r="20" /> 
     <circle id="S" cx="240" cy="240" r="20" />
     <circle id="T" cx="240" cy="340" r="20" />
     <circle id="U" cx="240" cy="440" r="20" />
     <circle id="V" cx="240" cy="540" r="20" />
     <circle id="W" cx="240" cy="640" r="20" />
     <circle id="X" cx="240" cy="740" r="20" />
  </g>
   <!--rect-->
  <g fill="white" stroke="black">
      <rect id="t16" x="230" y="80" width="20" height="20" rx="5"></rect>
      <rect id="t17" x="230" y="180" width="20" height="20" rx="5"></rect>
      <rect id="t18" x="230" y="280" width="20" height="20" rx="5"></rect>
      <rect id="t19" x="230" y="380" width="20" height="20" rx="5"></rect>
      <rect id="t20" x="230" y="480" width="20" height="20" rx="5"></rect>
      <rect id="t21" x="230" y="580" width="20" height="20" rx="5"></rect>
      <rect id="t22" x="230" y="680" width="20" height="20" rx="5"></rect>
  </g> 

  <g font-size="10" text-anchor="middle">
    <text x="240" y="42">Extemal_step</text>
    <text x="240" y="142">adust2d3d</text>
    <text x="240" y="242">Vertvi_edge</text>
    <text x="240" y="342">Viscof_h</text>
    <text x="240" y="442">Adv_uv_edge_dcn</text>
    <text x="240" y="542">Vdif_uv</text>
    <text x="240" y="642">adcor</text>
    <text x="240" y="742">Vdif_uv</text>
  </g>
  <g font-size="10" text-anchor="middle">
    <text x="240" y="92">t16</text>
    <text x="240" y="192">t17</text>
    <text x="240" y="292">t18</text>
    <text x="240" y="392">t19</text>
    <text x="240" y="492">t20</text>
    <text x="240" y="592">t21</text>
    <text x="240" y="692">t22</text>
  </g>
    <!--line-->
  <g stroke="black">
      <line id="l1" x1="240" y1="60" x2="240" y2="80" marker-end='url(#markerArrow)'></line>
      <line id="l2" x1="240" y1="100" x2="240" y2="120"marker-end='url(#markerArrow)'></line>
      <line id="l3" x1="240" y1="160" x2="240" y2="180"marker-end='url(#markerArrow)'></line>
      <line id="l4" x1="240" y1="200" x2="240" y2="220"marker-end='url(#markerArrow)'></line>
      <line id="l5" x1="240" y1="260" x2="240" y2="280"marker-end='url(#markerArrow)'></line>
      <line id="l6" x1="240" y1="300" x2="240" y2="320"marker-end='url(#markerArrow)'></line>
      <line id="l7" x1="240" y1="360" x2="240" y2="380"marker-end='url(#markerArrow)'></line>
      <line id="l8" x1="240" y1="400" x2="240" y2="420"marker-end='url(#markerArrow)'></line>
      <line id="l9" x1="240" y1="460" x2="240" y2="480"marker-end='url(#markerArrow)'></line>
      <line id="l10" x1="240" y1="500" x2="240" y2="520"marker-end='url(#markerArrow)'></line>
      <line id="l11" x1="240" y1="560" x2="240" y2="580"marker-end='url(#markerArrow)'></line>
      <line id="l12" x1="240" y1="600" x2="240" y2="620"marker-end='url(#markerArrow)'></line>
      <line id="l13" x1="240" y1="660" x2="240" y2="680"marker-end='url(#markerArrow)'></line>
      <line id="l14" x1="240" y1="700" x2="240" y2="720"marker-end='url(#markerArrow)'></line>
  </g>

  <!-- -------------------------------底部转折的t23-----------------------------------------   -->

  <g>
    <rect id="t23" x="280" y="730" width="20" height="20" fill="white" stroke="black" rx="5"></rect>
    <line x1="260" y1="740" x2="280" y2="740" stroke="black" marker-end='url(#markerArrow)'></line>
    <text x="290" y="742" font-size="10" text-anchor="middle">t23</text>
    <line x1="300" y1="740" x2="320" y2="740" stroke="black" marker-end='url(#markerArrow)'></line>
  </g>


   <!-- ----------------------------第四列（自下到上）--------------------------------------------   -->
   <!--circle-->
  <g fill="white" stroke="black">
     <circle id="Y" cx="340" cy="740" r="20"/>
     <circle id="Z" cx="340" cy="640" r="20" /> 
     <circle id="A1" cx="340" cy="540" r="20" />
     <circle id="B1" cx="340" cy="440" r="20" />
     <circle id="C1" cx="340" cy="340" r="20" />
     <circle id="D1" cx="340" cy="240" r="20" />
     <circle id="E1" cx="340" cy="140" r="20" />
  </g>

     <!--rect-->
  <g fill="white" stroke="black">
      <rect id="t24" x="330" y="680" width="20" height="20" rx="5"></rect>
      <rect id="t25" x="330" y="580" width="20" height="20" rx="5"></rect>
      <rect id="t26" x="330" y="480" width="20" height="20" rx="5"></rect>
      <rect id="t27" x="330" y="380" width="20" height="20" rx="5"></rect>
      <rect id="t28" x="330" y="280" width="20" height="20" rx="5"></rect>
      <rect id="t29" x="330" y="180" width="20" height="20" rx="5"></rect>
  </g>

   <!-------文本------------->
  <g font-size="10" text-anchor="middle">
    <text x="340" y="742">Bcond_gcn</text>
    <text x="340" y="642">wreal</text>
    <text x="340" y="542">Adv_q</text>
    <text x="340" y="442">Adv_q</text>
    <text x="340" y="342">Fct_q2</text>
    <text x="340" y="242">Fct_q21</text>
    <text x="340" y="142">Vdif_q</text>
  </g>
  <g font-size="10" text-anchor="middle">
    <text x="340" y="692">t24</text>
    <text x="340" y="592">t25</text>
    <text x="340" y="492">t26</text>
    <text x="340" y="392">t27</text>
    <text x="340" y="292">t28</text>
    <text x="340" y="192">t29</text>
  </g>
     <!--line-->
  <g stroke="black">
      <line id="l15" x1="340" y1="720" x2="340" y2="700" marker-end='url(#markerArrow)'></line>
      <line id="l16" x1="340" y1="680" x2="340" y2="660"marker-end='url(#markerArrow)'></line>
      <line id="l17" x1="340" y1="620" x2="340" y2="600"marker-end='url(#markerArrow)'></line>
      <line id="l18" x1="340" y1="580" x2="340" y2="560"marker-end='url(#markerArrow)'></line>
      <line id="l19" x1="340" y1="520" x2="340" y2="500"marker-end='url(#markerArrow)'></line>
      <line id="l20" x1="340" y1="480" x2="340" y2="460"marker-end='url(#markerArrow)'></line>
      <line id="l21" x1="340" y1="420" x2="340" y2="400"marker-end='url(#markerArrow)'></line>
      <line id="l22" x1="340" y1="380" x2="340" y2="360"marker-end='url(#markerArrow)'></line>
      <line id="l23" x1="340" y1="320" x2="340" y2="300"marker-end='url(#markerArrow)'></line>
      <line id="l24" x1="340" y1="280" x2="340" y2="260"marker-end='url(#markerArrow)'></line>

      <line id="l24" x1="340" y1="220" x2="340" y2="200"marker-end='url(#markerArrow)'></line>
      <line id="l24" x1="340" y1="180" x2="340" y2="160"marker-end='url(#markerArrow)'></line>
  </g> 

     <!-- -------------------------------顶部转折的t30-----------------------------------------   -->

  <g>
    <rect id="t30" x="380" y="132" width="20" height="20" fill="white" stroke="black" rx="5"></rect>
    <line x1="360" y1="140" x2="380" y2="140" stroke="black" marker-end='url(#markerArrow)'></line>
    <text x="390" y="146" font-size="10" text-anchor="middle">t30</text>
    <line x1="400" y1="140" x2="420" y2="140" stroke="black" marker-end='url(#markerArrow)'></line>
  </g>
 <!-- ----------------------------第五列（自上到下）--------------------------------------------   -->
    <!--circle-->
  <g fill="white" stroke="black">
     <circle id="F1" cx="440" cy="140" r="20" /> 
     <circle id="G1" cx="440" cy="240" r="20" />
     <circle id="H1" cx="440" cy="340" r="20" />



     <circle id="I1" cx="440" cy="540" r="20" />
     <circle id="J1" cx="440" cy="640" r="20" />
     <circle id="K1" cx="440" cy="740" r="20" />
  </g>
   <!--rect-->
  <g fill="white" stroke="black">
      <rect id="t31" x="430" y="180" width="20" height="20" rx="5"></rect>
      <rect id="t32" x="430" y="280" width="20" height="20" rx="5"></rect>
     
      <rect id="t33" x="425" y="420" width="30" height="30" rx="5"></rect>

      <rect id="t34" x="430" y="580" width="20" height="20" rx="5"></rect>
      <rect id="t35" x="430" y="680" width="20" height="20" rx="5"></rect>
  </g>  
  <!-------文本------------->
   <g font-size="10" text-anchor="middle">
    <text x="440" y="142">Adv_t</text>
    <text x="440" y="242">Fct_t</text>
    <text x="440" y="342">Vidf_ts</text>

    <text x="440" y="542">DOCTYPE</text>
    <text x="440" y="642">Fct_5</text>
    <text x="440" y="742">Vdif_ts</text>
  </g>
  <g font-size="10" text-anchor="middle">
    <text x="440" y="192">t31</text>
    <text x="440" y="292">t32</text>
    <text x="440" y="440">t33</text>
    <text x="440" y="592">t34</text>
    <text x="440" y="692">t35</text>
  </g>
     <!--line-->
  <g stroke="black">
      <line id="l3" x1="440" y1="160" x2="440" y2="180"marker-end='url(#markerArrow)'></line>
      <line id="l4" x1="440" y1="200" x2="440" y2="220"marker-end='url(#markerArrow)'></line>
      <line id="l5" x1="440" y1="260" x2="440" y2="280"marker-end='url(#markerArrow)'></line>
      <line id="l6" x1="440" y1="300" x2="440" y2="320"marker-end='url(#markerArrow)'></line>

      <line id="l7" x1="440" y1="360" x2="440" y2="420"marker-end='url(#markerArrow)'></line>     
      <line id="l10" x1="440" y1="450" x2="440" y2="520"marker-end='url(#markerArrow)'></line>

      <line id="l11" x1="440" y1="560" x2="440" y2="580"marker-end='url(#markerArrow)'></line>
      <line id="l12" x1="440" y1="600" x2="440" y2="620"marker-end='url(#markerArrow)'></line>
      <line id="l13" x1="440" y1="660" x2="440" y2="680"marker-end='url(#markerArrow)'></line>
      <line id="l14" x1="440" y1="700" x2="440" y2="720"marker-end='url(#markerArrow)'></line>
  </g>

  <!-- -------------------------------底部转折的t36-----------------------------------------   -->

  <g>
    <rect id="t23" x="480" y="730" width="20" height="20" fill="white" stroke="black" rx="5"></rect>
    <line x1="460" y1="740" x2="480" y2="740" stroke="black" marker-end='url(#markerArrow)'></line>
    <text x="490" y="742" font-size="10" text-anchor="middle">t36</text>
    <line x1="500" y1="740" x2="520" y2="740" stroke="black" marker-end='url(#markerArrow)'></line>
  </g>

    <!-- ----------------------------第六列（自下到上）--------------------------------------------   -->
   <!--circle-->
  <g fill="white" stroke="black">
     <circle id="L1" cx="540" cy="740" r="20"/>
     <circle id="M1" cx="540" cy="640" r="20" /> 
     <circle id="N1" cx="540" cy="540" r="20" />
     <circle id="O1" cx="540" cy="440" r="20" />
     <circle id="P1" cx="540" cy="340" r="20" />
     <circle id="Q1" cx="540" cy="240" r="20" />
     <circle id="R1" cx="540" cy="140" r="20" />
  </g>
     <!--rect-->
  <g fill="white" stroke="black">
      <rect id="t37" x="530" y="680" width="20" height="20" rx="5"></rect>
      <rect id="t38" x="530" y="580" width="20" height="20" rx="5"></rect>
      <rect id="t39" x="530" y="480" width="20" height="20" rx="5"></rect>
      <rect id="t40" x="530" y="380" width="20" height="20" rx="5"></rect>
      <rect id="t41" x="530" y="280" width="20" height="20" rx="5"></rect>
      <rect id="t42" x="530" y="180" width="20" height="20" rx="5"></rect>
      <rect id="t43" x="525" y="60" width="30" height="30" rx="5"></rect>
  </g>
   <!-------文本------------->
  <g font-size="10" text-anchor="middle">
    <text x="540" y="742">Bcond_gcn</text>
    <text x="540" y="642">wreal</text>
    <text x="540" y="542">Adv_q</text>
    <text x="540" y="442">Adv_q</text>
    <text x="540" y="342">Fct_q2</text>
    <text x="540" y="242">Fct_q21</text>
    <text x="540" y="142">Vdif_q</text>
  </g>
  <g font-size="10" text-anchor="middle">
    <text x="540" y="692">t37</text>
    <text x="540" y="592">t38</text>
    <text x="540" y="492">t39</text>
    <text x="540" y="392">t40</text>
    <text x="540" y="292">t41</text>
    <text x="540" y="192">t42</text>
    <text x="540" y="82">t43</text>
  </g>
    <!--line-->
  <g stroke="black">
      <line id="l15" x1="540" y1="720" x2="540" y2="700" marker-end='url(#markerArrow)'></line>
      <line id="l16" x1="540" y1="680" x2="540" y2="660"marker-end='url(#markerArrow)'></line>
      <line id="l17" x1="540" y1="620" x2="540" y2="600"marker-end='url(#markerArrow)'></line>
      <line id="l18" x1="540" y1="580" x2="540" y2="560"marker-end='url(#markerArrow)'></line>
      <line id="l19" x1="540" y1="520" x2="540" y2="500"marker-end='url(#markerArrow)'></line>
      <line id="l20" x1="540" y1="480" x2="540" y2="460"marker-end='url(#markerArrow)'></line>
      <line id="l21" x1="540" y1="420" x2="540" y2="400"marker-end='url(#markerArrow)'></line>
      <line id="l22" x1="540" y1="380" x2="540" y2="360"marker-end='url(#markerArrow)'></line>
      <line id="l23" x1="540" y1="320" x2="540" y2="300"marker-end='url(#markerArrow)'></line>
      <line id="l24" x1="540" y1="280" x2="540" y2="260"marker-end='url(#markerArrow)'></line>
      <line id="l24" x1="540" y1="220" x2="540" y2="200"marker-end='url(#markerArrow)'></line>
      <line id="l24" x1="540" y1="180" x2="540" y2="160"marker-end='url(#markerArrow)'></line>

      <line id="l24" x1="540" y1="120" x2="540" y2="90"marker-end='url(#markerArrow)'></line>

  </g> 
  <!--多边形构造循环体-->
  <g>
      <polyline points="540,60 540,30 600,30 600,800 140,800 140,760" fill="none" stroke="black" marker-end='url(#markerArrow)'/>
  </g>
</svg>
<script>
    const setInterval = function(){
        //可以在这里调用ajax获取当前激活的节点
        //剩下的操作便是为上个节点赋值白色，为当前节点赋值红色
        const id_list = ["A","B","C","D","E","F","G","H","I"]
        let dom = null
        let times = 0
        window.setInterval(()=>{
            if(dom){
                dom.setAttribute('fill','white')
            }
            dom = document.getElementById(id_list[times%9])
            dom.setAttribute('fill','red')
            times++
        },2000)//定时器
    }
    setInterval()
</script>
</body>

</html>