如何轉換Snap.svg中的形狀而不將轉換應用於其蒙版？

Question

我想變換一個矩形（位置，比例和角度）有一個蒙版。

我創建了一個小提琴文件來演示我的問題。 http://jsfiddle.net/MichaelSel/vgw3qxpg/2/

點擊綠色的矩形，看看它是如何在它的頂部的圓上移動的。矩形正在移動，而圓是靜止的。這是我想要對象採取行動的方式。

但現在點擊頂部的按鈕。 圓形現在是綠色矩形的一個蒙版，現在當您按下它時，您可以看到變形也應用於蒙版。 （這個圓圈並不像一個面具那樣保持靜止）。

我知道更多的時候不是這樣，你想用這種方式對待一個面具，但對於我的應用程序，我想要的是相反的。

我能夠通過在藍色示例中創建相反的動作來克服此問題。

因此，我的演示非常簡單，我期待在大型應用程序中實現此功能。有沒有一種方法可以實現我想要的而又不麻煩？

這是綠色的（不好的）例子代碼：

s = Snap("#player") 
    rect = s.rect(100, 100, 100, 100).attr({"fill" : "green" }) 
    circle = s.circle(200, 200, 50).attr({"fill" : "white" }) 
    rect.attr("mask",circle) 
    rect.click(function() { 
     rect.transform("t20,10s1.1...") 
    }) 

這是藍色（良好），例如代碼：

rect2 = s.rect(300, 100, 100, 100).attr({ "fill": "blue" }) 
    circle2 = s.circle(400, 200, 50).attr({ "fill": "white" }) 
    rect2.attr("mask", circle2) 
    rect2.click(function() { 
     rect2.transform("t20,10s1.1...") 
     circle2.transform("t-20,-10s"+1/1.1 + "...") 
    }) 

有什麼建議？

謝謝。

Answer 1

如果將矩形放在一個組中，然後將該蒙版應用於該組，則可以按照任何喜歡的方式轉換矩形而不影響蒙版。

s = Snap("#player") 
rect = s.rect(100, 100, 100, 100).attr({"fill" : "green" }) 
g = s.group(rect); 
circle = s.circle(200, 200, 50).attr({"fill" : "white" }) 
rect.click(function() { 
    rect.transform("t20,10s1.1...") 
}) 


$("#myButton").click(function() { 
    g.attr("mask",circle) 
}) 

http://jsfiddle.net/vgw3qxpg/3/