如何转换Snap.svg中的形状而不将转换应用于其蒙版？

我想变换一个矩形（位置，比例和角度）有一个蒙版。如何转换Snap.svg中的形状而不将转换应用于其蒙版？

我创建了一个小提琴文件来演示我的问题。 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 + "...") 
    })

有什么建议？

谢谢。

来源

2015-06-20 Michael Seltenreich

如果将矩形放在一个组中，然后将该蒙版应用于该组，则可以按照任何喜欢的方式转换矩形而不影响蒙版。

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/

来源

2015-06-21 03:31:06

如何转换Snap.svg中的形状而不将转换应用于其蒙版？

回答

相关问题