accessing inline SVG elements with javascript

Question

I'm playing around with SVG and I've hit a wall.

what im trying to do it when you hover over on svg element it will cause another to appear.

my idea was using javascript to add and remove a "hidden" class when you hover, but its not working, it works on none SVG elements but I can't see why it's not working here.

<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/

Its works on none SVG elements, like this example http://jsfiddle.net/EzfwV/210/

Am I just missing something simple here?

Answer 1

Am I just missing something simple here?

Yes.

You forgot to include jQuery!

Select jQuery from the "Frameworks & Extensions" menu.