代码之家 › 专栏 › 技术社区 › SkyWalker

如何在文档中获得SVG位置?

svg d3.js html

SkyWalker · 技术社区 · 6 年前

我有一个主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偏移量。

1 回复 | 直到 6 年前

Gerardo Furtado 6 年前

由于SVG不支持,因此无法使用链接页面中建议的解决方案。 element.offsetTop .

一个简单的选择是使用该属性 top 属于 Element.getBoundingClientRect() :

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>

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

2 年前

user6456564 · 双条形图创建

6 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

6 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

6 年前

MTT · 最适合散点图的回归

6 年前

Cyley Simon · 以chile/name格式将Csv转换为json

6 年前

Himani · 线图和面积图之间的颜色不同

6 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

6 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

6 年前