Как правильно наложить SVG элементы на IMG?

Question

[Jedi]

Доброе утро.

Ни в Google, и ни на каком ресурсе нет информации о том, как правильно реализовать интерактивную карту.

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

ViewBox правильный, пути(атрибут d) прописаны правильно, но при изменении размера окна, даже на 1 пиксель, все рушится.

Смотрел уже готовые сайты на которых уже реализовано подобное. Я там заметил, что родительский div в котором svg и img, при изменении размера автоматически меняет ширину и высоту. Для того чтобы убедиться, я поменял те значения на другие. Эффект не такой как у меня, но заметно, что там тоже происходит "не попадание" элементов на те, что в изображении. Скорее всего проблема именно в этом.

Пример:

<div class="resizable div_100" style="width: 1788.44px; height: 1006px; top: 0px; left: -211.722px;">

Для наложения этих двух элементов я использую следующую структуру:

<div class="someClass">
  <svg></svg>

  <img />
</div>

Почему так происходит?
Как решить проблемку?

И где я могу прочитать статью, документацию о том, как грамотно реализовать интерактивную карту?

Очень вас прошу, дайте совет, помоги решить проблемку.
У меня уже не осталось сил искать, так как в интернете нет почти ничего...

Заранее спасибо!

Comments

[Jedi]

Pavel Denisov, а вы проверьте). Имеется ввиду статья которой не более 3-х лет. :)

Answer 1

[Арсений Матыцин]

1. Если у тебя инициализация через JS, перезапускай отрисовку по триггеру ресайза окна.
2. Вспомни хоть один случай, кроме поворота телефона, когда ты в реальных условиях начнешь ресайзить сайт.
2.1. А потом вспомни про сафари на яблоке и прослезись.

3. Не очень понятно, где именно у тебя img, но он должен быть частью svg кода, в правильном обращении с SVG тебе поможет она — css.yoksel.ru/adaptive-pixel-perfect

Answer 2

[Илья Пашнин]

Делал такое.
Секрет в том, что размер img и svg совпадает до пикселя). Таким образом, сверху находится svg c разными полигонами и события при наведении вешаются именно на них.
Чтобы svg не плясал, у меня он был с абсолютным позиционированием и top, right, bottom, left: 0. У img и svg общий div, размеры которого зависят от img, их придерживается и svg.

Comments

[Jedi]

Илья, у меня точно также, но при ресайзе все ломается...

[Jedi]

Илья, что я могу ещё упустить?

[Илья Пашнин]

Сегодня накидаю пример, подождете?

[Илья Пашнин]

PHPjedi, вот накидал пример https://jsfiddle.net/MaestroALF/fwvp3qec/

[Jedi]

Илья Пашнин, Илья, большое тебе спасибо! Попробую сейчас, надеюсь все получится).

Спасибо!

[Jedi]

Илья Пашнин, Илья, не получилось :(. Я немного покопался на сайте в котором уже реализовано это. Все дело именно в resizable div.

Но я не понимаю как это реализовано... Может быть у тебя есть идеи?

Вот пример этого div, в котором img и svg:

<div class="resizable div_100" style="width: 1788.44px; height: 1006px; top: 0px; left: -211.722px;">

[Jedi]

Илья Пашнин, Илья, я по разному тестировал, и пришел к такому выводу, что все что нужно есть в этом скрипте: jsfiddle.net/63fLdjny/. Это основной скрипт, и там где то как работает resize, но сколько я бы не пытался, я не понял как оно устроено. Может быть у тебя получится. Это вроде jQuery, а я любитель Vanilla.js :)

Спасибо все же!