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>