Задать вопрос
@cepgej
html

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

www.a-centauri.ru/plans/korpus1-2
Обратите внимание на выделение этажей домов. Понятно, что применена технология svg. Но дело в том, что выделение работает и при уменьшении масштаба. Т.е. параметры векторного рисунка вроде бы должны меняться, но я не заметил, что это происходит.
Поясните пожалуйста, на каких алгоритмах, технологиях и идеях основана работа этого сайта.
  • Вопрос задан
  • 2581 просмотр
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 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

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro
23 дек. 2024, в 00:27
20000 руб./за проект
Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro
23 дек. 2024, в 00:15
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы