代码之家 › 专栏 › 技术社区 › 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>

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

3 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

3 年前

Sougata Mukherjee · 如何同时悬停svg和文本

3 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

3 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

3 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

3 年前