2016-02-16 2 views
0

Я играю с SVG, и я ударил стену.доступ к встроенным элементам SVG с javascript

Что я пытаюсь сделать, когда вы наведете на элемент svg, это вызовет появление другого.

Моя идея была использована javascript для добавления и удаления «скрытого» класса при наведении курсора, но его не работает, он не работает ни в каких элементах SVG, но я не понимаю, почему он здесь не работает.

<svg xmlns:cc="http://web.resource.org/cc/" 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    width="400px" 
    height="400px" 
    viewBox="0 150 960 900"> 
<path id="loc36" class="maploc" d="m 352.28954,738.20354 0,140.66609 85.8653,0 0,-140.41399 z"/> 
<path id="info36" class="infopanel " d="m 306.42857,896.64787 0,157.85713 539.28572,0 0,-158.57141 z"/> 
</svg> 

Javascript

$("#loc36").hover(function(){ 
     $('#info36').removeClass('hidden'); 
    },function(){ 
     $('#info36').addClass('hidden'); 
    }); 

https://jsfiddle.net/atprsteq/

Его работы ни на одном SVG элементов, как в этом примере http://jsfiddle.net/EzfwV/210/

я просто не хватает что-то простое здесь?

+0

Я пытаюсь заставить это работать на странице Wordpress, теперь он работает на jfiddle, но не на Wordpress. JQuery загружен, поэтому не уверен, что происходит. – Rigas

+0

jsFiddle завернул ваш код в обработчик onload. Вы делаете что-то подобное в WordPress? Любые ошибки в консоли? – gilly3

+0

Я понял, спасибо, оказалось, у меня был еще один элемент, который технически перекрывал тот, который я тестировал, поэтому, конечно, он не срабатывал. – Rigas

ответ

1

Я просто пропустил что-то простое здесь?

Да.

screenshot of error message

Вы забыли включить JQuery!

screenshot of javascript settings

Выберите JQuery из "Frameworks & Extensions" меню.

+1

Stackoverflow не позволит мне опубликовать ссылку на jsfiddle без включения кода в мой ответ. Поскольку нет кода для изменения, но только параметр jsfiddle для изменения, я поставлю ссылку в комментарии: [jsfiddle.net/gilly3/atprsteq/1](https://jsfiddle.net/gilly3/atprsteq/ 1 /) – gilly3

+0

Спасибо, я я, кажется, идиот. Я создаю его на странице Wordpress, поэтому я не уверен, как его реплицировать; – Rigas

Смежные вопросы