Any offset of an element returns 'undefined'

Question

So I have an svg#cta-scroll image which is a child of div#main. Whenever I try to get offsetTop (or any other kind of offset) of the svg, it always returns undefined (Chrome, OS X).

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

initialCtaWelcomeOffset here always returns undefined.

Does anyone have an idea what might be going on?

EDIT: I don't think it'll help much but here's the CSS for the svg:

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

In an act of desperation, I tried removing the animation and the positioning but it doesn't change a thing...

Answer 1

Since SVG elements don't support the offsetTop property, you would be best off wrapping the SVG in a div and getting of the offset of that element instead.

e.g.

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

HTML:

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