Question

i am using Raphael and Elberts FreeTransform Plugin.
this is what i tried yet MyWork

My clip path works until i do not translate or rotate the set of rectangles, just after rotation or translation it stop working properly.
I want those rectangles inside the boundary of path, as soon as they go outside they should disappear.
The answer to why i am using javascript(manually) not Raphael for clippath, is , Raphael only supports clip rect.
i need your help to sort out this one.

thanks in advance

Update:1
My Work 2
I solve it for translation case but in rotation case it still disturbs all the set.

Answer 1

Creating a new g tag(group) and moving all the elements to that group and then applying clip-path to g tag works. ClipPath doesn’t recognize transform of attribute of element if applied to individual elems. So it should be wrapped in g for this.

It is applied Here