我如何使用jquery偏移作为svg行坐标?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>
我如何使用jquery偏移作为svg行坐标?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>
假设你已经有了偏移值。给一些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得出这两个表之间的线,使svg
absolute
的位置,使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>
感谢您的帮助,我试图做的是连接两个表与SVG线,但我不能把两个表之间的线。 https://jsfiddle.net/rafaelcb21/61tou8om/ – rafaelcb21
@ rafaelcb21检查更新的答案 –
谢谢你完美的工作 – rafaelcb21
偏移? –