使用jquery自动连接svgs

Question

我有一个大svg，在里面，还有5个小svgs。我在大svg里放了3个svg。我将使用不同的坐标等来实现它。现在，我只想自动在3 svg之间创建线条。我可以绘制svg线并在它们之间连接但我想即使改变位置，我希望线自动连接它们彼此。

编辑：这个问题和你提到的不一样。我问我怎样才能通过jquery自动生成这些行。我的意思是如果我改变坐标，线条将不会保持静止。他们将遵循形状。

＆＃13;

＆＃13;

.rect-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

svg {
  fill: red;
}

svg.mini-icon {
  fill: black;
  position: absolute;
}

svg.mini-asteriks {
  top: 5%;
  left: 3%;
}

svg.mini-diamond {
  top: 24%;
  left: 54%;
}

svg.mini-rect {
  top: 73%;
  left: 69%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rect">
    <div class="rect-wrap rect-wrap-edna">
    
          <svg class="big-rect-circle" data-person="asli" width="80px" height="80px" viewBox="0 0 47 47">
          <circle  class="mini-circle " cx="23" cy="23" r="23"/>
        </svg>
        
        <svg class="mini-asteriks mini-icon" data-person="asli" width="16px" height="16px" viewBox="0 0 45.438 48.32">
             <path class="st0edna asterix" d="M18.72 0h8.16l-.16 16.96 14.72-8.64 4 7.52-14.88 8.32 14.878 8.32-4 7.52-14.718-8.64.16 16.96h-8.16l.16-17.12-14.72 8.64L0 32.48l14.88-8.32L0 15.84l4.16-7.68 14.72 8.8L18.72 0z"/>
        </svg>
        <svg class="mini-diamond mini-icon" data-person="asli" width="16px" height="16px" viewBox="0 0 65.054 65.054">
            <rect class="st0edna diamond" x="9.528" y="9.527" transform="rotate(-135 32.527 32.527)" width="46" height="46"/>
        </svg>
        <svg class="mini-rect mini-icon" data-person="asli" width="16px" height="16px" viewBox="0 0 47 47">
            <rect class="mini-rect " x=".5" y=".5"  width="46" height="46"/>
        </svg>
    </div>

</div>

＆＃13;

＆＃13;

＆＃13;