RaphaelJS scale a path on hover

Question

I would like to add a pop effect when I hover over a SVG path. What I have tried causes my paths to fly off past the bottom of the browser window.

I have read this post and attempted to compensate for the coordinate increase but it failed for my setup. link

example of path:

var paths = {
lakes: {
    name: 'lakes',
           value: 'notSelected',
    path: 'm199,606l121,-45l18,60l-32,60l-52,157l-99,-9l-13,-70l-17,8l-22,0l-11,-30l9,-26l61,-45l12,-6l21,-35l4,-19z'
},

etc.

and I use for hover (only hover is shown)

obj.hover(function(){
if(paths[arr[this.id]].value == 'notSelected')
  {
        this.animate({
        fill: '#32CD32'
        }, 300);
  }

which works perfectly to fade in my chosen colour. I first added:

this.animate({transform: 'scale(1.1)'}, 300);

and this is when I spotted the path moving to the bottom so I tried to translate the coordinates with

this.animate({transform: 'translate(-199,-606)'}, 300);

and they still move away. Another member pointed out my paths were all drawing with a large Y, is this my problem?

(I redraw my SVG with obj.attr(attributes).attr( { transform: "S0.81,0.81,150,-2000" } ); to counter this Y value)`

Answer 1

This example works

http://jsfiddle.net/chrisloughnane/EUwRq/

///// below did not work correctly in IE6,8 or 9 /////

I found a solution with @Timmain's post cant-scale-multiple-paths-in-raphael

using ScaleRaphaël and by adding

    this.toFront();
    this.scale(1.2);

so my hover is now

'obj
.hover(function(){ 
    if(paths[arr[this.id]].value == 'notSelected')
        {
        this.animate({
            fill: '#32CD32'
        }, 300);
    }
    this.toFront();
    this.scale(1.2);'

I got the effect I was after.