jquery偏移作爲svg行座標

Question

我如何使用jquery偏移作爲svg行座標？

例如，當使用偏移量{top：69，left：9}和{top：69，left：223}並將它們插入到行的svg座標中時，行位置不是相同的偏移量

的offset.top是Y座標和offset.left是x座標

<svg> 
    <line x1="9" y1="69" x2="223" y2="68" style="stroke:rgb(255,0,0);stroke-width:1" /> 
</svg> 

Answer 1

假設你已經有了偏移值。給一些id ti行，並從jquery中可以使用這是作爲選擇器來操縱屬性。

試試這個。

var offset1 = { 
 
    top: 69, 
 
    left: 9 
 
}; 
 

 
var offset2 = { 
 
    top: 69, 
 
    left: 223 
 
}; 
 

 
$('#line').attr({ 
 
    "x1": offset1.left, 
 
    "y1": offset1.top, 
 
    "x2": offset2.left, 
 
    "y2": offset2.top 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <line id='line' x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:1" /> 
 
</svg>

UPDATE

只看見自己的fiddle.to得出這兩個表之間的線，使svgabsolute的位置，使z-index:-1。所以svg會留下兩張桌子。該元件的

檢查這個片段

$(document).on("mousemove", function(event) { 
 
    $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY); 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: auto; 
 
    display: inline-block; 
 
    margin-right: 150px; 
 
} 
 
svg { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <line id="line" x1="45" y1="20" x2="200" y2="20" style="stroke:rgb(255,0,0);stroke-width:1" /> 
 
</svg> 
 
<table border=1> 
 
    <tr> 
 
    <td id="hiA">Hi</td> 
 
    </tr> 
 
    <tr> 
 
    <td>How</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ok</td> 
 
    </tr> 
 
</table> 
 

 
<table id="ola3" border=1> 
 
    <tr> 
 
    <td id="hiB">Hi</td> 
 
    </tr> 
 
    <tr> 
 
    <td>How</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ok</td> 
 
    </tr> 
 
</table> 
 

 
<div id="log"></div>