如何在不将变换应用于其遮罩的情况下变换 Snap.svg 中的形状？

Question

我想变换一个有遮罩的矩形（位置、比例和角度）。

我创建了一个 fiddle 文件来演示我的问题。 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/

如何在不将变换应用于其遮罩的情况下变换 Snap.svg 中的形状？

How to transform a shape in Snap.svg without applying the transformation to its mask?

javascript

svg

snap.svg