How to select a raphael svg tag with jQuery?

Question

I'm quite new to Raphael, and quite lost too in its documentation...

I'd like to manipulate a Raphael object through jQuery:

$(".handle").hover(
               function() {
                     $("path[rel='"+$(this).attr('rel')+"']").addClass("pathhover");
               }, 
               function() {
                    $("path").removeClass("pathhover");
               }
            );

Path is a Raphael-generated path, and jQuery does not seem to be able to select this svg tag.

Would you have an idea how to achieve this ?

Thanks ;)

Answer 1

Here is a solution, thanks to jacktheripper help.

The raphael object can't be manipulated directly by jQuery; we need to use its reference to the DOM (its node).

Therefore, the jQuery handler needs the Raphael object name. In this example, I use the rel tag to store the name of the raphael object.

$(".handle").hover(
               function() {
                     var path=eval($(this).attr('rel'));
                     path.node.setAttribute("class","pathhover");
               }, 
               function() {
                    var path=eval($(this).attr('rel'));
                    path.node.removeAttribute("class","pathhover");
               }
            );

Answer 2

Much easier to use the native hover methods from Raphael http://irunmywebsite.com/raphael/additionalhelp.php?q=raphaelevents Using node can yield incomplete results