Clip path in Raphaël.js

Question

How can I use the clip path with Raphaël.js, like this example . It is the seams that Raphael.js has only a rectangle clip in it.

Answer 1

You can cut a hole along an elongated path. This is a method known as donut holes, and you can see an example on my index page. If this looks complicated, it is not. See the Information Database and the method indicated by donut holes. My site index is http://www.irunmywebsite.com/ Before It was. Now you can find several clip paths (imagine you see several holes) The carousel and thumbnail holder are just one way ... See Rauel Cruz

A better example, which I have included below. The central blue region has several holes cut into it. This is a multipurpose use. This is part of what I call the DOM / SVG hybrid solution.

Cut multi-purpose holes for various reasons

Answer 2

I do not think you can do this through Raphael. You can do this by manipulating the DOM directly, but you will lose the ability to call Raphael methods on this element.

I believe Raphael is a bit outdated, now IE supports SVG. You can do much more with simple javascript and the SVG specification.

Answer 3

If, as in the example image, this is a bitmap ( png , gif , jpg ... bitmap pixel images) that you are trying to copy, in fact it is very simple. In Raphael 2, you simply set the fill to point to the image file. He uses it as a background image.

If you want to crop an image or photograph using a path or Raphael shape, like a clipping mask or clip path for image files, just set the image as the fill path.

somepath.attr({fill: 'someimage.png'});

Limitations (AFAIK):

• Only one image per path
• Only one path for the image (use complex paths for complex masks)
• Things like background position are not easy - see this question for more
• I think it is impossible to stop the repetition of the image.