获取 SVG 元素上的 offsetTop

Question

为什么offsetTop返回undefined这个 SVG 元素？

var svg = document.querySelector('svg')
var h1 = document.querySelector('h1')

console.log('svg', svg.offsetTop)
console.log('h1', h1.offsetTop)

<svg width="26" height="30" viewBox="0 0 12 14">
  <path d="M6 4.038L12 0v3.623L6 8 0 3.623V0l6 4.038zm0 6L12 6v3.623L6 14 0 9.623V6l6 4.038z"/>
</svg>
    
<h1>This works</h1>

Answer 1

DOM 元素的继承树以 Element 作为基类，并分别派生出 SVGElement 和 HTMLElement。offsetTop 是在 HTMLElement 接口上定义的，而不是在 Element 接口上定义的，因此 SVG 元素不支持它。

您可以通过调用element.getBoundingClientRect()来获取此信息。这适用于所有元素。