RaphaelJS在懸停時縮放路徑

Question

當我將鼠標懸停在SVG路徑上時，我想添加一個彈出效果。我試過的東西導致我的路徑飛過瀏覽器窗口的底部。

我讀過這篇文章，並試圖彌補座標增加，但它失敗了我的設置。路徑的link

例如：

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' 
}, 

等

和我使用的懸停（僅懸停示出）

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

這完全在我所選擇的顏色褪色。我先說：

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

，這是當我發現的路徑移動的底部，所以我試圖用座標

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

翻譯，他們仍然搬走。另一位成員指出我的路徑都是用大Y繪製的，這是我的問題嗎？

（我重繪我的obj.attr(attributes).attr({ transform: "S0.81,0.81,150,-2000" }); SVG對付這個Y值）`

Answer 1

這examp樂作品

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

/////下面沒有正確地在IE6,8工作或9 /////

我發現@使用Timmain的帖子cant-scale-multiple-paths-in-raphael

的解決方案ScaleRaphaël並通過添加

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

所以我現在懸停是

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

我得到了我以後的效果。

Answer 2

我在iPod，但我想你可能會發現這個有趣的，也許幫助您2

http://www.irunmywebsite.com/raphael/additionalhelp.php?q=dynamichorizontalmenu

它顯示比例爲一體的變換

部分希望它可以幫助