Question

我有一个主要的SVG，并且在考虑其他页面元素和滚动的情况下找不到正确的偏移量获取方法。

例如，使用this page中说明的解决方案并执行以下操作，我得到{"x":null,"y":null}：

console.log(JSON.stringify(getPosition(d3.select('svg').node())));

我需要一种获取左偏移量和上偏移量的方法，因为当我在鼠标移动上使用getBoundingClientRect时，它将返回绝对页面坐标，而不是基于主SVG的零值，因此我无法分辨左偏移量或上偏移量偏移量以将其归一化为零。

例如，在这种情况下：

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

我需要获得600的顶部偏移以及从document.documentElement.scrollTop中获得的滚动，但是我找不到从任何d3js API获取600 Y偏移的方法。

Answer 1

由于SVG不支持element.offsetTop，因此您无法使用在链接的页面中提出的解决方案。

一个简单的替代方法是使用Element.getBoundingClientRect()的属性top：

const svg = d3.select("svg");
const offset = svg.node().getBoundingClientRect().top;

console.log(offset)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<img width="600" height="600"/>
<svg width="1500" height="650"/>

如果您仍然想使用offsetTop，请将SVG包裹在HTML容器中，例如<div>：

const svg = d3.select("svg");
const offset = svg.node().parentNode.offsetTop;

console.log(offset)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<img width="600" height="600" />
<div>
  <svg width="1500" height="650" />
</div>

如何获取文件中的svg位置？

1 个答案: