Как обесцветить часть карты?

Question

[Mark321]

Добрый день, помогите пожалуйста!
уже мучался-мучался, у меня что-то не выходит реализовать фичу
Есть карта! Хочу что бы она изначально была обесцвечена
filter: grayscale(1)
А при клике на часть карты, выделенная часть становилась цветной
Вот пример -> https://codepen.io/scrappyjs666/pen/qBJgMmO
можете закомментировать в стилях filter: grayscale(1) и кликнуть на карту и поймете как это работает
ток вот я стремлю к поведению => сначала нет цвета => потом задаю
я понимаю, что как в примере я не перебью стили, но я уже много чего попробовал (как и через джс задавать элементам фильтр) так и через css
задать свойства для path/polygon не годится

Comments

[Вадим]

задать свойства для path/polygon не годится

А зачем Вы тогда вопрос задаёте?
У Вас карта состоит из path\polygon.

А при клике на часть карты, выделенная часть становилась цветной

Как ещё Вы хотите определять "часть карты" кроме как не через полигон или path?

Ну перерисуйте значит на канвас карту и там попиксельно меняйте цвет. Очень удобно (нет)

А так задача решается минимальным образом, если не по клику а по ховеру, то и вовсе в "2 строки":

svg {
  width: 100%;
}

body {
  background: #0A0A0A;
/*   filter: grayscale(1); */
}


[id] {
  color: #f23;
}

path {
  filter: grayscale(1);
}

path:hover {
  filter: none;
}

[Mark321]

Вадим, я поделил карту с помощью айдишников, так как мне надо
и path и полигоны имеют уникальные айди

Answer 1

[Сергей delphinpro]

я понимаю, что как в примере я не перебью стили,

нет, не перебьете.

Решение вроде очевидное – изначально для всех элементов svg выставить фильтр, а по клику убирать его. У body разумеется убрать фильтр совсем. Иначе никак.

Comments

[Mark321]

а я так пробовал, только не для svg
а задавать всем элементам у которых есть айди через джс фильтр
а потом убирать, но не получилось

[Сергей delphinpro]

Mark321, почему не получилось? У вас прекрасно получается устанавливать фильтр по клику. Установите так же при загрузке на все.

[Mark321]

Сергей delphinpro, я не вру, я действительно так делал и не понимаю в чем ошибка
https://codepen.io/scrappyjs666/pen/ZEqwMPz
цвет не добавляется

[Сергей delphinpro]

Mark321, вот сюда не нужно вешать фильтр


Эти группы можно вообще убрать из svg, я не вижу от них практической пользы

[Сергей delphinpro]

а вообще не нужно при загрузке ничего из скрипта ставить. Просто в css указать path { filter: grayscale(0); }

[Mark321]

Сергей delphinpro, понял, да в этом и есть проблема, я про это вообще не подумал
спасибо большое за помощь

[WbICHA]

Mark321, так ты вешаешь грейскейл на все элементы, у которых есть ид, а они есть в том числе на родителях.
Вообще тебе структуру поменять бы или логику, потмоу что несколько одинаковых ид в целом нехорошо, а у тебя там ещё и в кучу всё. По сути сейчас тебе нужен такой селектор:

const items = document.querySelectorAll(`#Moscow_all_districts > [id]:not([id^="path"])`);
items.forEach(el => el.style.filter = 'grayscale(1)'); 

document.addEventListener('click', (e) => {
  const id = e.target.id;
  const allItems = document.querySelectorAll(`#Moscow_all_districts > #${id}:not([id^="path"])`);
  allItems.forEach(el => el.style.filter = 'grayscale(0)'); 
  allItems.forEach(el => el.style.fill = '#2859FF');
});

Такой вариант, конечно, работает, но воняет...

[WbICHA]

Сергей delphinpro, там у него ещё и вложенности внутри есть из g с path внутри, так что тупо на pаth весить тоже так себе.
И в конце ещё и контур всего города тоже в виде пути.

[Сергей delphinpro]

WbICHA, да, но это уже детали, главное понял, что фильтр висит на родительских элементах и соответственно не может быть перебит в дочерних.