Привет! В свое время я немало попарился с этой темой, когда нужно было сделать svg-карту. Конечно, я покажу в статье чуть более простой вариант использования, но тем не менее вполне себе рабочий. Поехали!
SVG Map — довольно часто используемая фича для сайтов. Необязательно это карта страны\города. Есть еще сайты с использованием svg-дома, где можно выбирать этажи, и т.д. В моем случае это карта России. Посмотреть реальный пример можно тут: Русский металл.
Суть была такая — нужно было сделать целую структуру карт, т.е. при нажатии на какой-то регион перебрасывало дальше в след. регион и так далее. На все это были свои карты, естественно.
В моем же примере мы рассмотрим только карту России, и как из нее сделать ссылки, а так же красивый ховер эффект.
Пожалуй, не буду вставлять огромную svg-карту сюда, займет немыслимо много места. Посмотрите в кодпене, а здесь расскажу лишь основное:
У нас имеется левое меню и ссылки в нем. У ссылок есть соответствующий href (хотя тут можно обойтись и дата-атрибутом, если Вам надо по ссылке куда-то отправлять человека) и data-color — это цвет, который будет при наведении у элементов карты.
У самих ссылок карты те же самые данные. Опять же, можно их сменить на ссылки, а вместо href перенести эти данные в data-href и изменить скрипт.
Как работать именно с самой картой, когда Вы ее получили и не имеете ссылок — вручную. Чистить, удалять ненужное, искать элементы и заворачивать их в ссылки. Никто не говорил что будет легко :) У меня для Вас как раз есть изначальная версия карты: map. Пользуйтесь)
JS
$leftMenu = $('.left-menu').find('a');
$right = $('.map').find('a');
$leftMenu.mouseenter(function(){
let classOne = $(this).attr('href');
let color = $(this).data('color');
let currentElement = $(".map a[href='"+classOne+"']");
currentElement.find('polygon').css('fill',color).css('stroke-width', '2px')
currentElement.find('path').css('fill',color).css('stroke-width', '2px')
$(this).addClass('active');
});
$leftMenu.mouseleave(function(){
let classOne = $(this).attr('href');
let color = $(this).data('color');
let currentElement = $(".map a[href='"+classOne+"']");
let fillPol = currentElement.find('polygon').attr('fill');
let fillPath = currentElement.find('path').attr('fill');
currentElement.find('polygon').css('fill', fillPol).css('stroke-width', '1px')
currentElement.find('path').css('fill', fillPath).css('stroke-width', '1px')
$(this).removeClass('active');
});
$right.mouseenter(function(){
let classOne = $(this).attr('href');
let color = $(this).data('color');
let currentElement = $(".left-menu a[href='"+classOne+"']");
$(this).find('polygon').css('fill',color).css('stroke-width', '2px')
$(this).find('path').css('fill',color).css('stroke-width', '2px')
currentElement.addClass('active');
});
$right.mouseleave(function(){
let classOne = $(this).attr('href');
let color = $(this).data('color');
let currentElement = $(".left-menu a[href='"+classOne+"']");
let fillPol = $(this).find('polygon').attr('fill');
let fillPath = $(this).find('path').attr('fill');
$(this).find('polygon').css('fill', fillPol).css('stroke-width', '1px')
$(this).find('path').css('fill',fillPath).css('stroke-width', '1px')
currentElement.removeClass('active');
});
На самом деле код донельзя простой. Рассказываю:
Сперва создаем две переменных для элементов карты и элементов меню.
Затем через mouseenter делаем наведение. Получаем в переменные classOne и color нужные значения, href и цвет соответственно. href нужен, чтобы создать связь между разными DOM-элементами и позволить при наведении на пункт меню подсвечивать карту и наоборот.
Небольшое пояснение по поводу использования метода css и почему он там дважды: К сожалению, так пришлось сделать. На самом деле, я не хотел использовать метод css, но svg элементы не реагируют на addClass. Пришлось работать так. И да, если Вы думаете, что можно при уводе мышки просто сбросить тег style — ie скажет вам ни-ни :)
Ну а так, я по сути нахожу все polygon и path, даю им новую заливку (fill) и увеличиваю на пиксель ширину обводки, чтобы смотрелось интереснее. Вот и все)
Кодпен: https://codepen.io/MaxGraph/pen/pBWoMZ
Надеюсь, Вам было полезно. Как обычно, если у Вас есть вопросы — прошу в личные сообщения или комментарии. Подписывайтесь на блог, чтобы не упустить ничего нового и получать иногда «секретики» на почту, которые тут не появятся)
Оригинальная статья на: https://blog.maxgraph.ru/2019/04/26/svg-karta/