Jquery 偏移量作为 svg 线的坐标

Question

如何使用 jquery 偏移量作为 svg 线的坐标？

例如使用偏移量{top:69,left:9}和{top:69,left:223}插入到线条的svg坐标中时，线条位置不相同offset

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>

更新

刚看到你的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>

Jquery 偏移量作为 svg 线的坐标

Jquery offset as coordinates for svg line

jquery

svg

line

offset

coordinates