Любое смещение элемента возвращает 'undefined'

Question

Так что у меня есть изображение svg#cta-scroll, которое является дочерним по отношению к div#main. Всякий раз, когда я пытаюсь получить offsetTop (или любой другой вид смещения) svg, он всегда возвращает undefined (Chrome, OS X).

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

initialCtaWelcomeOffset здесь всегда возвращает undefined.

Есть ли у кого-нибудь идеи, что может быть?

EDIT: Я не думаю, что это очень помогает, но вот CSS для 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 

В акте отчаяния, я попытался удалить анимацию и позиционирование, но это не делает измените вещь ...

Answer 1

Поскольку элементы SVG не поддерживают свойство offsetTop, вам лучше всего обойти SVG в div и получить смещение этого элемента.

например.

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

HTML:

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