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

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

9 月前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

9 月前

man · CSS-如何具有或模拟仅适用于内部的半径边框

10 月前

McLaren · 增加笔划宽度属性后,图标将被裁剪

10 月前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

1 年前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

1 年前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

1 年前

MarcelausZell · 调整svg的大小会导致额外的高度

1 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

1 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

1 年前