需要使用jQuery，javascript或任何其他插件修复SVG DOM
我正在使用SVG创建一个家族树，下面给出了一个小结构。 我需要帮助在鼠标上添加特定的类（比如’selected’） – “节点”，在“g”的每个第一个“rect”上，这是当前hover的“节点”的父节点。
$ this.addClass（’classname’）不起作用。 所以我使用$ this.attr（’class’，’classname’）
无能为力：我需要像父母一样的函数（在jQuery中）或类似的方法来获取当前hover的“rect”的所有父“g”。
目前的工作 – 点击这里
样本结构。
Name Name Name Name 我认为jQuery与SVG不友好:(
我建议你使用一个jQuery插件，让你与SVGcanvas交互。 正是这个http://keith-wood.name/svg.html（SVG DOM选项卡）
SVG DOM与为其设计jQuery的HTML DOM不同。 特别是，任何可以设置动画的属性都存储为对象而不是纯字符串。 这包括class属性。 因此，使用类的jQuery函数不适用于SVG节点。
要解决此问题，您可以使用jQuery SVG DOM扩展。
您可以使用raphael.js添加事件处理程序。 例如
var paper = new Raphael( "id", 200, 200 ); var rect = paper.rect( 0, 0, 160, 35 ); rect.mouseover( function( ) { // do stuff });
更多信息和演示在这里 。
你的家谱如何在这里工作的小提琴
UPDATE
虽然Raphael.js不提供查找svg元素父级的函数，但您仍然可以通过向raphael元素添加自定义属性来跟踪您的族树。
我在这里创建了一个示例来说明如何实现这一目标。 希望它有所帮助。
这对我有用。
$(window).ready(function(){ $('#viewport .c_node').mouseenter(function(e) { paint_parent(e.target.parentNode); }); $('#viewport .c_node').mouseleave(function(e) { $('#viewport g').each(function(index, element) { $(element).attr('class',""); }); }); }); function paint_parent(element){ if(element.id!="viewport"){ // to the parent id viewport $('#'+element.id).attr('class',"cnode_parent"); paint_parent(element.parentNode); } }