Как при помощи js присвоить класс атрибуту svg path?

Question

[Александр Логинов-Солоницын]

Всем доброго дня, вечера или что там у Вас сейчас) Проблема такая - есть svg map, она генерируется из js обьекта.
Проект сделан по аналогии с htmlbook.ru/blog/postroenie-interaktivnoi-karty-s-... , только у меня эта карта выступает в роли меню.
И должно это дело работать по принципу меню в одностраничнике.
То есть при клике на карту - перебрасывает на определенный якорь на странице.
И так же на карте должно подсвечиваться текущее положение (аналогично что с активным пунктом меню).
Все уже сделано, осталась мелочь - добавить определенный class текущему path.
Делаю вот так:
В ответ и ошибок нет и class не добавляется.
В гугле ничего путного не нашел, там по слову path выдает только про системный path. Если есть у кого на примете статейки по svg хорошие, то буду очень благодарен.

Answer 1

[Евгений Петров]

Не хочу разбираться в том коде. Совсем.
Но реализуется это крайне просто.
Желательно ориентироваться не на класс, а на data-атрибуты (следует учесть, что напрямую обращение к dataset в FF не работает).
Вариант с учётом особенностей IE, про которую упомянул Nikolay Talanov.

Comments

[Александр Логинов-Солоницын]

а я и не просил разбираться в коде (тут и кода то нет как такового), я просто обьяснил контекст задачи - почему не могу прописать в файле класс, и спросил как добавить класс динамически.

[Евгений Петров]

Так я вроде бы и написал, как добавить и снять класс динамически. Разве нет?..

[Александр Логинов-Солоницын]

Да, этот пример мне пригодится, спасибо. И хватит на меня уже гнать) Я пишу сюда вопрос не по тому что я 5 минут попарился, не смог решить и сразу сюда строчить. Я прежде чем писать на форум стараюсь все из своего мозга выжать. Первый раз работаю с svg и сразу заданьеце не из особо простых попалось.

[Евгений Петров]

Никто не гонит на вас. Я даже не знаю, что это значит:) Я не хочу разбираться в коде с htmlbook.

[Александр Логинов-Солоницын]

Там смысл весь такой - из исходного svg файла берется только значение атрибута d, это значение записывается в свойства объекта и потом с помощью либы Raphael рендертися svg map. У меня еще не совсем это все в голове устаканилось. Поэтому Ваши примеры послужат хорошим толчком к решению задачи.

[Евгений Петров]

Вот немного про генерацию SVG Почему при добавлении тега appendChild'oм, контент не отображается?

[Александр Логинов-Солоницын]

Да, в любой технологии свои особенности и подводные камни. Причем иногда об такой камень можно ногу сломать)

[Александр Логинов-Солоницын]

Ну вы прямо специалист) Мне не приходят уведомления о Ваших updates

Answer 2

[Nikolay Talanov]

Все довольно просто - jQuery не умеет в добавление классов к svg. Хотите добавлять класс - юзайте нативный js. jQ вообще очень много чего не умеет с svg. Да и вообще с свг много своих "фишек", которые вы освоите только с опытом. Например classlist api, которому так все радуются в ванилле, вообще не умеет работать с свг в ИЕ.
Вот простая демка - codepen.io/suez/pen/634874e5486fcea55c7e9f8053d49e54
Слева попытка добавить при клике класс на jQuery, справа на ванилле. Заодно можете и в ие посмотреть, там оба варианта не сработают :)

Comments

[Александр Логинов-Солоницын]

у меня не стоит задача, чтобы в IE все работало как надо, главное чтоб не глючило совсем. Спасибо за код. На самом деле инфы по работе с svg маловато. Но спрос на него растет. Думаю теперь я смогу решить задачу.

[Nikolay Talanov]

Александр Логинов-Солоницын: Работа с свг это увлекательная штука, где решает лишь опыт. Можно конечно юзать какой-нибудь d3, но у него там такой порог входа, что с тем же успехом можно начать рисовать свг руками (как и я делаю по фану), а потом уже при необходимости начать его юзать.
Если нужно добавление классов к свг, работающее в ие, то работайте по старинке, с использованием className. Думаю такие основы вы знаете.
codepen.io/suez/tag/svg - вот тут можете найти кучу моих демок с свг, возможно поможет в будущем, там сплошняком одни хромированные велосипеды для продвинутого самообучения :)

[Александр Логинов-Солоницын]

Спасибо за линки. Думаю что 100% что-то да пригодится. Основы то знаю, просто jquery расслабляет и уже как только звучит в голове - выбрать элемент, сразу руки пишут $() на автомате)