需要使用jQuery，javascript或任何其他插件修复SVG DOM

Question

I'm creating a family tree using SVG, a small structure is given below. I need help to add specific class(say 'selected') on mouse over on the class - "node", on every first "rect" of "g" which is the parents of the current hovered "node".

$this.addClass('classname') is not working. So I m using $this.attr('class','classname')

Impotent : I need a function like parents ( - in jQuery ) or similar methods to get all parent "g" of the current hovered "rect".

current work - click here

A sample structure.

<svg style="width:100%;height:455px" id="svg_root" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g id="viewport" >
        <g id="1">
            <rect class="node" y="0" x="0" width="160" height="35" />
            <text class="prof_name" y="14" x="34">Name</text>
            <g id="2">
                <rect class="node" y="40" x="30" width="160" height="35" />
                <text class="prof_name" y="54" x="64">Name</text>
                <g id="7">
                    <rect class="node" y="80" x="90" width="160" height="35" />
                    <text class="prof_name" y="94" x="94">Name</text>
                </g>
            </g>
        </g>
        <g id="18">
            <rect class="node" y="120" x="0" width="160" height="35" />
            <text class="prof_name" y="134" x="34">Name</text>
        </g>
    </g>
</svg>

I think jQuery is not friendly with SVG :(

Answer 1

I would recommend you to use a jQuery plugin that lets you interact with an SVG canvas. Exactly this one http://keith-wood.name/svg.html (SVG DOM tab)

The SVG DOM is different to the HTML DOM for which jQuery was designed. In particular, any attributes that can be animated are stored as objects instead of plain strings. This includes the class attribute. Thus, jQuery's functions that work with classes don't work on SVG nodes.

To overcome this problem you can use the jQuery SVG DOM extension.

<script type="text/javascript" src="jquery.svgdom.js"></script>

Answer 2

You could use raphael.js to add eventhandlers. eg

var paper = new Raphael( "id", 200, 200 );
var rect = paper.rect( 0, 0, 160, 35 );

rect.mouseover( function( ) {
    // do stuff
});

More information and demos here .

A fiddle of how your family tree might work here

UPDATE

Although Raphael.js does not provide functions to find the parent of a svg element you can still track your family tree by adding custom properties to raphael elements.

I have created an example here to show how you might achieve this. Hopefully it helps.

Answer 3

This works for me .

$(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);
        }
    }