Jquery | Svg | Lines

У меня есть код, который работает. Но нужно помочь главные блоки переместить с svg на div, но чтобы линии так же рисовались. Вот пример блока

      <!-- Тайтл блок -->   
      <g class="node-container">
        <rect class="node-background" width="204" height="108" x="0" y="0" rx="14" ry="14" />

        <g class="node-header">
          <rect class="header-round-rect" width="200" height="40" x="2" y="2" rx="14" ry="14" />
          <text class="header-title" x="60" y="22">My Title</text>
          <text class="sub-header-title" x="28" y="35">Targe is inside component</text>
        </g>

        <g class="node-content">
          <rect class="content-round-rect" fill="url(#linear-gradient)" width="200" height="60" x="2" y="44" rx="14" ry="14" />
          <rect class="content-rect"  width="200" height="60" x="2" y="44" />

          <g class="inputs">

            <g class="input-field" transform="translate(0, 50)">
              <g class="port">
                <circle class="port-outer" cx="15" cy="10" r="7.5" />
                <circle class="port-inner" cx="15" cy="10" r="5" />
                <circle class="port-scrim" cx="15" cy="10" r="7.5" />
              </g>
              <text class="port-label" x="28" y="14">Input 1</text>
            </g>
            
            <g class="input-field" transform="translate(0, 75)">
              <g class="port">
                <circle class="port-outer" cx="15" cy="10" r="7.5" />
                <circle class="port-inner" cx="15" cy="10" r="5" />
                <circle class="port-scrim" cx="15" cy="10" r="7.5" />
              </g>
              <text class="port-label" x="28" y="14">Input 2</text>
            </g> 
          </g>

          <g class="outputs">

            <g class="output-field" transform="translate(0, 50)">
              <g class="port" data-clickable="false">
                <circle class="port-outer" cx="189" cy="10" r="7.5" />
                <circle class="port-inner" cx="189" cy="10" r="5" />
                <circle class="port-scrim" cx="189" cy="10" r="7.5" data-clickable="false" />
              </g>
              <text class="port-label" x="176" y="14">Output 1</text>
            </g>
            
            <g class="output-field" transform="translate(0, 75)">
              <g class="port" data-clickable="false">
                <circle class="port-outer" cx="189" cy="10" r="7.5" />
                <circle class="port-inner" cx="189" cy="10" r="5" />
                <circle class="port-scrim" cx="189" cy="10" r="7.5" data-clickable="false" />
              </g>
              <text class="port-label" x="176" y="14">Output 2</text>
            </g>
           
          </g>
          <svg x="7" y="10">
            <image width="16" height="16" xlink:href="https://vladgohn.com/park/i-func.png" />
          </svg>
        </g>
      </g> 
      <!--  Конец - Тайтл блок -->  

https://codepen.io/nazar-komarenec/pen/oNLzOWK