Use .tofront() with raphael

Question

it seems i can't use .tofront() (no capital f) option in my map using raphael js

the fiddle links to my working example, it's javascript code and a bit of css3 for animate the path http://jsfiddle.net/6CvXF/20/

i would like each path goes to front when i click it, unfortunately this piece of code doesn't work

$('path').click(function() {
     (this).tofront();
});

there's a way better to retrieve the element to use in the click function? thanks

Answer 1

jQuery can't access the svg elements directly you can use this library: keith-wood.name/svg.html

mentioned here: How to use jquery in SVG (Scalable Vector Graphics)?

or you can simple use following built in Rapahel click function to achieve the result you are seeking:

    var r = Raphael("canvas",500,500);
    var rectangle = r.rect(10, 10, 100, 100).attr({fill:'red'}).click(function(){
                //click function statements
                this.toFront();
        });