title: Any offset of an element returns 'undefined'
body: <p>So I have an <code>svg#cta-scroll</code> image which is a child of <code>div#main</code>. Whenever I try to get <code>offsetTop</code> (or any other kind of offset) of the <code>svg</code>, it always returns <code>undefined</code> (Chrome, OS X).</p>
  
  <pre><code>(function hideCtaWelcomeOnScroll() {
    var ctaWelcomeElement = document.getElementById('cta-scroll');
    var initialCtaWelcomeOffset = ctaWelcomeElement.offsetTop;
  })();
  </code></pre>
  
  <p><code>initialCtaWelcomeOffset</code> here always returns <code>undefined</code>.</p>
  
  <p>Does anyone have an idea what might be going on?</p>
  
  <p>EDIT: I don't think it'll help much but here's the CSS for the <code>svg</code>:</p>
  
  <pre><code>#cta-scroll
    width: 2vw
    display: block
    fill: white
    margin-left: -1vw
    position: absolute
    bottom: 7vh
    left: 50%
    z-index: 10
    animation: ctaScroll 10s infinite
  </code></pre>
  
  <p>In an act of desperation, I tried removing the animation and the positioning but it doesn't change a thing...</p>