score:4

Accepted answer

You cannot use the solution proposed in the page you linked because SVG does not support element.offsetTop.

An easy alternative is using the property top of 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"/>

If you still want to use offsetTop, wrap the SVG in an HTML container, like a <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>


Related Query