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

Question

I want to transform a rectangle (position, scale, and angle) that has a mask.

I created a fiddle file to demonstrate my problem. http://jsfiddle.net/MichaelSel/vgw3qxpg/2/

Click the green rectangle, and see how it moves in relationship to the circle on top of it. The rectangle is moving and the circle is stationary. This is how I want to objects to act.

But now click the button on top. The circle is now a mask for the green rectangle, now when you press it, you can see that that the transformations are applied to the mask as well. (the circle doesn't stay stationary like when it wasn't a mask).

I know that more often then not, you want to treat a mask this way, but for my app I want the opposite.

I was able to overcome this problem by creating an opposite movement in the blue example.

With that, my demo is very simple and I am looking to implement this in a big app. Is there a way to achieve what I want without all the hassle?

This is the code for the green(bad) example:

  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...")
    })

This is the code for the blue (good) example:

    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 + "...")
    })

Any suggestions?

Thank you.

Answer 1

If you put the rectangle in a group, and then apply the mask to the group, you can transform the rect any way you like without affecting the mask.

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/