使用javascript访问内联SVG元素

时间:2016-02-16 16:41:27

标签: javascript jquery svg

我正在玩SVG而且我已经撞墙了。

当你将鼠标悬停在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/

我在这里错过了一些简单的东西吗?

1 个答案:

答案 0 :(得分:1)

  

我在这里错过了一些简单的东西吗?

screenshot of error message

你忘了包含jQuery!

screenshot of javascript settings

从“Frameworks&amp; Extensions”菜单中选择jQuery。