Question

I have a rectangle and i am rendering images in it.
I am using clip-rect of Raphael to crop images outside the rectangle area.
At the same time i need to give clip-path to images and rectangle so they can not get outside that particular path.
What Raphael is doing, converting my images clip-rect attribute to clip-path, and then after , overriding that clip-path by the new one.
How can i overcome this problem so my clip-rect and clip-path both works????

Answer 1

Applying clip-rect to elements works for images inside rect and further applying clip-path to that clip-rect which is applied to elements, solves the problem.

<clipPath id="a">
<path..../>
</clipPath>
<clipPath id="b" clip-path="url(#a)">
<rect../>
</clipPath>
<image id="b" clip-path="url(#b)">