Всем привет. Задание значит у меня такое взять эту SVG картинку, которая сама по себе состоит из 85 более мелких SVG картинок, при наведение на которые должны показываться всплывающие листы с названием региона и прочей информацией, а также меняться цвет и что, самое сложное оно должно при клике на кнопки увеличение или уменьшении увеличиваться или уменьшаться. Ясно одно реализовать подобное можно с помощью позиционирования элементов относительно всей картинки, а всю картинку, в свою очередь, позиционировать относительно всего body и фиксировать его положение, дабы при увеличении и уменьшении окна браузера, элементы никуда не перемещались а у самой ключевой картинке появлялся или исчезал горизонтальный и вертикальный скрол. Но реализовать подобное крайне сложно (расставить все SVG - элементы на свои места, как показано на картинке и еще сделать так чтобы все это не ломалось и адекватно работало), из-за чего у меня вопрос к вам. Есть ли идеи как это сделать проще, с помощью JS к примеру?
ErgoProxy1637 Привет! Да, можно использовать JavaScript для упрощения реализации интерактивной карты с всплывающими листами и функцией увеличения/уменьшения. Один из способов это сделать - использовать библиотеку JavaScript для работы с SVG, например, Snap.svg или D3.js. Эти библиотеки предоставляют удобные методы для манипуляции с SVG-элементами и добавления всплывающих листов. Для реализации функции увеличения/уменьшения можно использовать CSS-свойство `transform: scale()`, которое позволяет масштабировать элементы. Вот примерный план действий: 1. Загрузи SVG-картинку на страницу. 2. Используй библиотеку JavaScript для разбора SVG-файла и получения отдельных SVG-элементов. 3. Расставь SVG-элементы на нужные позиции на основе координат в SVG-файле. 4. Добавь обработчики событий на каждый SVG-элемент для отображения всплывающих листов при наведении. 5. Добавь обработчики событий на кнопки увеличения/уменьшения для изменения масштаба SVG-картинки с помощью CSS-свойства `transform: scale()`. Надеюсь, это поможет тебе начать реализацию. Если у тебя возникнут вопросы или нужна дополнительная помощь, не стесняйся задавать!
ErgoProxy1637 Приношу извинения за предоставленные неработающие ссылки. Вместо этого, я могу предложить использовать следующий онлайн-инструмент для измерения координат на изображении: 1. [ImageMapster](https://www.outsharked.com/imagemapster/default.aspx): Этот инструмент позволяет создавать и редактировать изображения с использованием HTML-карт и областей. Ты можешь загрузить свою SVG-картинку в ImageMapster и вручную определить и измерить границы областей. Пожалуйста, попробуй использовать ImageMapster для измерения координат границ областей на твоей SVG-картинке. Если у тебя возникнут еще вопросы или проблемы, не стесняйся задавать.
ChatGPT, как сделать так, чтобы при наведении на область svg - картинки появлялось всплывающее окно, как в примере на картинке ?
dima20, Привет. С изменением масштаба страницы при клики на соответствующий button очень сильно поможет, что до появления и скрытия листов, а так же изменения цвета, разве не проще будет работать через класс active? Написать на JS условия проверки класса и если (if) класса не будет, то удалить его иначе (else) добавить его. Но самый тяжелый вопрос остался не отвеченным(. Не знаешь, случайно, как расставить отдельные SVG - элементы корневой картинки, не прибегая к абсолютному позиционированию ? А то самый геммор именно в этом и будет заключаться (
.class { transition: 2s; } .class:hover { transform: scale(10); } дальше сверстать по красоте и всё --- Сообщение объединено с предыдущим 17 дек 2023 а не, не слушай меня, я не дочитал, мой подход говно, во че нашел
ErgoProxy1637, ну а можешь готовый поискать и передалть https://github.com/search?q=interactive+map+russia&type=repositories https://github.com/lexleo/russia-regions-map https://lexleo.github.io/russia-regions-map/ главн шоб тя за такое не выебали
ERROR, ахахах, я все проверю, и поверь, если оно окажется рабочим, я верну тебе благодарности обернутую в "зелень", если ты понял о чем я
В фигме выделяешь все эти кусочки, нажимаешь ПКМ и выбираешь Flatten, они у тебя превращаются в один вектор, после чего ты экспортируешь его из в фигмы в формате svg. В html просто вставляешь что-то типа <img src="some.svg" alt="svg" /> HTML <img src="some.svg" alt="svg" /> а в css что-то типа img > *:hover { fill: #2424FF; transition: all 300ms ease; } CSS img > *:hover { fill: #2424FF; transition: all 300ms ease; } Мог что-то упустить, но подробнее гуглится: https://skillbox.ru/media/base/kak_verstalshchiku_rabotat_s_svg/ https://qna.habr.com/q/607468
diayuokaro, эх где ты раньше был) пару дней назад бы сказал мне об этом, моя работа была бы проще) А так да, вчера об этом узнал, кое-что ты упустил. Там не нужно через img обращаться, необходимо полностью со всеми путями скопировать svg и вставить его в HTML, а затем добавить :hover всем path в svg. Запись будет выглядеть следующим образом: svg path:hover { background: blue}. Но все равно спасибо
да есть к примеру используй Math.random(переменный в котором твоя картинка) и это в функцию а потом с помощью добавление ивента вызови функцию