raphael.js crop image

I am newbie to raphael.js and svg. I have a开发者_高级运维n image element, i can select rectangles on it using drag and drop in any area. The problem is that image must be transparent, but selected rectangles not.

If i used css i would set background-image for rectangles and background position, but i have not found such possibility for svg (and probably vml for ie).

How can i crop the image and put it over transparent image or set background position to rectangle?

UPD: Actually i found the solution: for each newly created rectangle I can copy image and use clip-rect attribute. But this solution does not match my needs. I can not rotate clip-rect area, image only.

The rectangular clip-rect that raphaël provides is a subset of what you can do in svg.

Here's an example of rotated clipping: masking-path-02-b

Here's something a bit more advanced: masking-path-07-b