在2个div之间连接一条线

Question

我试图用divs和每两个div之间的连接线来进行类似网络的设计，但是当我用下面的JS函数使用svg和line标记时，控制台显示了一个错误

```
  $(function() {
var orgs = document.getElementsByClassName('org'),
    lines = document.getElementsByClassName('con-line'),
    org1,
    org2,
    line,
    pos1,
    pos2,
    count = 0;

for (let i = 0; i < orgs.length; i++) {
    
    org1 = orgs[i];

    for (let j = 0; j < orgs.length; j++) {

        org2 = orgs[j];
        line = lines[count];


        if (j != i)
        {
            pos1 = org1.position();
            pos2 = org2.position();

            line
                .attr('x1', pos1.left)
                .attr('y1', pos1.top)
                .attr('x2', pos2.left)
                .attr('y2', pos2.top)
                .attr('stroke', 'red')
                .attr('stroke-width', 2);

                count++;
        }
      }

  }    
  });
```

Answer 1

>

尝试将代码包装成“文档就绪”结构。这将确保在加载jQuery之后执行代码。

定义stroke和stroke-width属性以使线条可见。

$(function() {
  var line1= $('#line1');
  var div1 = $('#org1');
  var div2 = $('#org2');

  var l1pos1 = div1.position();
  var l1pos2 = div2.position();

  line1
    .attr('x1', l1pos1.left)
    .attr('y1', l1pos1.top)
    .attr('x2', l1pos2.left)
    .attr('y2', l1pos2.top)
    .attr('stroke', 'red')
    .attr('stroke-width', 10);
});

.con{
    margin-top: 50px;
}

.con-title{
    width: 100%;
    text-align: center;
    color: #4E4E50;
    font-size: 40px;
    font-weight: bold;
}

.org-map{
    position: relative;
    width: 300px;
    height: 300px;
    margin: 40px auto 0 auto;
}

.org{
    position: absolute;
}

.org .org-box{
    position: relative;
    bottom: 0px;
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background: #4E4E50;
    transition: 0.6s;
}

#org1{
    transform: translate(-50%, 0%);
    bottom: 80%;
    left: 50%;
}

#org2{
    transform: translate(-50%, 0%);
    bottom: 65%;
    left: 20%;
}

#org3{
    transform: translate(-50%, 0%);
    bottom: 35%;
    left: 20%;
}

#org4{
    transform: translate(-50%, 0%);
    bottom: 50%;
    left: 50%;
}

#org5{
    transform: translate(-50%, 0%);
    bottom: 65%;
    left: 80%;
}

#org6{
    transform: translate(-50%, 0%);
    bottom: 35%;
    left: 80%;
}

#org7{
    transform: translate(-50%, 0%);
    bottom: 20%;
    left: 50%;
}

.org:hover .org-box{
    background: #C3073F;
    animation: org 1s;
    animation-fill-mode: forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="con">
  <div class="con-title">Contributions</div>
  <div class="org-map">
    <div class="org" id="org1">
        <div class="org-box">
            <img src="" alt="">
        </div>
    </div>
    <div class="org" id="org2">
        <div class="org-box">
            <img src="" alt="">
        </div>
    </div>
    <div class="org" id="org3">
        <div class="org-box">
            <img src="" alt="">
        </div>
    </div>
    <div class="org" id="org4">
        <div class="org-box">
            <img src="" alt="">
        </div>
    </div>
    <div class="org" id="org5">
        <div class="org-box">
            <img src="" alt="">
        </div>
    </div>
    <div class="org" id="org6">
        <div class="org-box">
            <img src="" alt="">
        </div>
    </div>
    <div class="org" id="org7">
        <div class="org-box">
            <img src="" alt="">
        </div>
    </div>
    <svg width="500" height="500">
        <line id="line1"/>
        <line id="line2"/>
    </svg>
  </div>
</div>