Question

我有一个看起来像这样的HTML：

<body>
   <img src="image.svg" width="600" height="600" />
   <svg width="1500" height="650"/>
</body>

基本上，将高度为600的静态图像SVG放在d3js的svg目标的顶部。当我使用函数this.getBoundingClientRect()时，top和bottom的值中包括600，因此，为了捕获鼠标悬停等鼠标事件，必须考虑此偏移量。我还注意到，如果我在页面中向下滚动一点，则该偏移量也会更改，因此请修复它到600是不够的。在哪里可以动态获取此依赖视口的偏移量，使其始终保持一致？

function example(event, bounding) {
  // TODO: review this hack
  var magicYOffset = 600;

  var y = event[1];
  var top = bounding.top - magicYOffset;
  var bottom = bounding.bottom - magicYOffset;

  // TODO: do something with the new top and bottom
  return ???;
}

d3.drag()
  .on('start', function (d) {
    var event = d3.touch(this) || d3.mouse(this);
    clickX  = event[0];
    clickY  = event[1];
    cursorX = event[0];
    cursorY = event[1];

    var boundingRect = this.getBoundingClientRect();

    var flag = example(event, boundingRect);
    ...

Answer 1

我会尝试获取SVG的.offsetLeft和.offsetTop。那应该从整个页面中获取它，而不是从视口中获取，这将使它保持不变。

如何获得getBoundingClientRect顶部和底部包含的确切偏移量？

1 个答案: