Cube. Cube. - 4 months ago 8
Javascript Question

Any offset of an element returns 'undefined'

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...

DBS DBS
Answer

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>