На каких технологиях основана работа подобных сайтов?

www.a-centauri.ru/plans/korpus1-2
Обратите внимание на выделение этажей домов. Понятно, что применена технология svg. Но дело в том, что выделение работает и при уменьшении масштаба. Т.е. параметры векторного рисунка вроде бы должны меняться, но я не заметил, что это происходит.
Поясните пожалуйста, на каких алгоритмах, технологиях и идеях основана работа этого сайта.
  • Вопрос задан
  • 2581 просмотр
Решения вопроса 1
@cepgej Автор вопроса
Чтобы у svg работало масштабирование, ему необходимо прописать аттрибут viewBox. Например, viewBox="0 0 1920 1080" означает, что исходный векторный рисунок имеет 1920 пикселей в ширину и 1080 в высоту, а координаты всех его объектов рассчитываются от верхнего левого угла. Кроме того, на window необходимо повесить обработчик onresize, в котором аттрибутам width и height тега svg необходимо присваивать значения ширины и высоты окна соответственно.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
mlnkv
@mlnkv
JavaScript Developer
отслеживается событие масштабирования и пересчитывается высота и ширина svg элемента
window.addEventListener("resize", function() { /* do some interesting */ });
Ответ написан
Комментировать
copist
@copist
Empower people to give
Не заметил я там никого уменьшения. У них сайт не респонсив.

Подсветка по события onmouseover и onmouseout, повешана на теги <path> через javascript в файле www.a-centauri.ru/assets/js/js_pack.js строки 324

take.ms/1G7mh
take.ms/sbRPt

Движущаяся область <div class="floor_popup"> с обозначением текущего выделения привязана к курсору через событие onmousemove на <body class="korpus1-1">
take.ms/dED5U

Всё это можно определить через отладчик
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы