我正在嘗試使用divs 和每兩個之間的連接線進行類似網路的設計，divs但是當我使用下面的 JS 函式標記svg和line標記時，控制臺顯示一個錯誤，指出
位置不是函式。
我的代碼有什么問題？我該如何修復它或者是否有其他方法可以在兩個divs之間畫線？
這是代碼：
line1= $('#line1');
div1 = $('#org1');
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);.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>uj5u.com熱心網友回復：
jQuery
嘗試將您的代碼包裝到“檔案就緒”結構中。這將確保在加載 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>純 JavaScript
您可以使用Element.getBoundingClientRect()方法獲取有關
div塊的更多資訊。在這種情況下，在計算中需要考慮SVG元素本身的位置。為此，我們從點的絕對坐標中減去 SVG 左上角的對應坐標。
這是一個沒有 jQuery 的 JavaScript 代碼示例：
let line1 = document.getElementById('line1');
let svgRect = document.getElementById('lines').getBoundingClientRect();
let rect1 = document.getElementById('org1').getBoundingClientRect();
let rect2 = document.getElementById('org2').getBoundingClientRect();
let dot1x = (rect1.left rect1.right) / 2;
let dot1y = (rect1.top rect1.bottom) / 2;
let dot2x = (rect2.left rect2.right) / 2;
let dot2y = (rect2.top rect2.bottom) / 2;
setAttributes(line1, {
'x1': dot1x - svgRect.left,
'y1': dot1y - svgRect.top,
'x2': dot2x - svgRect.left,
'y2': dot2y - svgRect.top,
'stroke': 'red',
'stroke-width': 4,
});
// helper function from https://stackoverflow.com/a/12274782/6263942
function setAttributes(el, attrs) {
for(var key in attrs) {
el.setAttribute(key, attrs[key]);
}
}.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;
}<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" id="lines">
<line id="line1"/>
<line id="line2"/>
</svg>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/341606.html
標籤：javascript html 查询 css svg