javascript - 元素的任何偏移返回 'undefined'

Question

所以我有一个 svg#cta-scroll 图像，它是 div#main 的子图像。每当我尝试获取 svg 的 offsetTop(或任何其他类型的偏移量)时，它总是返回 undefined(Chrome、OS X)。

(function hideCtaWelcomeOnScroll() {
  var ctaWelcomeElement = document.getElementById('cta-scroll');
  var initialCtaWelcomeOffset = ctaWelcomeElement.offsetTop;
})();

initialCtaWelcomeOffset 这里总是返回 undefined。

有人知道会发生什么吗？

编辑:我认为它不会有太大帮助，但这是 svg 的 CSS:

#cta-scroll
  width: 2vw
  display: block
  fill: white
  margin-left: -1vw
  position: absolute
  bottom: 7vh
  left: 50%
  z-index: 10
  animation: ctaScroll 10s infinite

在绝望的情况下，我尝试删除动画和定位，但它并没有改变任何事情......

Answer 1

由于 SVG 元素不支持 offsetTop 属性，您最好将 SVG 包装在一个 div 中并改为获取该元素的偏移量。

例如

(function hideCtaWelcomeOnScroll() {
  var ctaWelcomeElement = document.getElementById('svgWrapper');
  var initialCtaWelcomeOffset = ctaWelcomeElement.offsetTop;
})();

HTML:

<div id="svgWrapper">
  <svg></svg>
</div>