Как с помощью JS узнать высоту элемента в встроенном svg на мобильных браузерах?

Question

[smithana]

Добрый день,

на странице присутствует интерактивный элемент. Допустим svg картинка с большим количеством точек.
При скролле страницы некоторые точки должны "всплывать" выше других.
Гугл подсказывает нам такой мануал:
https://www.sitepoint.com/scroll-based-animations-...
Берём из него js и в svg контурам нужных нам точек присваиваем класс допустим ".top"
Svg встраиваем инлайном в html и радуемся всплывающим точкам на всех ПК браузерах (те, что поддерживают анимацию css). (Можно вставить с помощью iframe, но ситуация не поменяется.)

Но с телефонами беда. Точки не всплывают. Вставляем в js алерт и видим, что функции .outerHeight() и .offset().top возвращают 0. Как на iOS, так и на андроиде.
Методом тыка определяем, что параметры тега svg определяется корректно, но к сожалению внутри тега svg мобильные браузеры не могут корректно высчитать высоту и смещение (например для g или path).

Кто-нибудь сталкивался с такой проблемой?

Знаю, что можно svg заменить например на png картинки и круги размещать абсолютным позиционированием. Но данный элемент адаптивный, и не хочется для каждого круга и для разных разрешений расписывать свои значения top, left.

Спасибо!

Answer 1

[trushka]

.getBoundingClientRect() выдаст координаты элемента относительно экрана, по идее для всего должно работать и сразу выдаст то, что нужно, с учётом прокрутки

Comments

[smithana]

Спасибо огромное!
Таким способом заработало:
var element_height = this.getBoundingClientRect().height;
var element_top_position = this.getBoundingClientRect().top + window.scrollY;

на iOS чуть дёргано правда, но работает