Как подобраться к элементам SVG через JS?

Question

[Spisoktem]

Всем доброго дня.
При верстке сайта столкнулся с проблемой в работе с SVG.
Есть SVG-шка подобной структуры:

<svg id="district">
    <path id="black1"> </path>
    <path id="black2"></path>
    <path id="white1"></path>
    <path id="white2"></path>
</svg>

Задача стоит в том чтобы при наведении на #white1 к #black1 добавлялся какой-то класс , через который я буду изменяться исходные стили этого элемента.
Таким способом не получается:

$('#white1').hover(
        function()
        {
            $('#black1').toggleClass('new');
        }
    );

Я так понимаю что специфика работы с svg элементами в js совсем иная. Подскажите пожалуйста как можно решить данную задачу ?

Comments

[Nikolay Talanov]

Потрайте на ванильном жс, у jQ есть проблемы с свг.

Answer 1

[lfoma]

Насколько я знаю, jQuery из коробки не поддерживает работу с svg.
Вот есть плагин для манипуляций https://habrahabr.ru/post/185750/

Answer 2

[fetis26]

Я не очень понял зачем вам JS. Реакцию на наведение вполне можно сделать и через CSS

#district:hover {
  и поехали
}

тут вопрос как встраивать SVG. Он должен быть либо частью документа, либо эти стили должны быть частью SVG