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行，你可以使用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>

<强>更新

刚刚看到你的小提琴。在这两张牌之间画一条线，取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>

Jquery偏移量作为svg行的坐标

1 个答案: