Same hover function for multiple paths in Raphael

Question

So I\'ve got my canvas and my paths:

var paper1 = Raphael(10, 50, 960, 560);

var mapShape1 = paper1.path(\"M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.4         


        

Answer 1

Why not give your shapes a class, and have jquery select the class?

You could do the following:

function style1(shape){
  shape.attr({
            "fill": "#33CCFF",
            "stroke": "000000",
            "stroke-width": "5",
            "class": '.js-path-hover'
        });
}

style1(mapShape1);
style1(mapShape2);
style1(mapShape3);

Then your hover event could be set up as follows:

$('.js-path-hover').on('hover', functionNameHere);

If raphael does not give you access to write a class onto these svg objects then you could use D3 to select them all and add a class to them. I've found combining D3, Raphael and jQuery to be really powerful. The only issue is you need to keep track of each of their limitations.