Задать вопрос
@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 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Разработка алгоритма на python (Data engineering)
21 нояб. 2024, в 23:30
300000 руб./за проект
Верстка Flutter + API
21 нояб. 2024, в 22:21
3000 руб./в час
Ещё заказы