How to get to SVG elements via JS?

Question

JavaScript

Good day everyone.
While building the site, I encountered a problem with SVG.
There is an SVG-frame with a similar structure:

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

The task is to add some class to #black1 when hovering over #white1 , through which I will change the initial styles of this element.
It doesn't work this way:

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

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

Answer 1

As far as I know jQuery doesn't support svg out of the box.
Here is a manipulation pluginhttps://habrahabr.ru/post/185750/

Answer 2

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

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

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