clip-path in Raphaël.js

Question

How can I use clip-path with Raphaël.js like this example. It seams that Raphael.js has only clip-rect in it.

Chasbeen · Accepted Answer · 2013-06-11T14:34:03.973

You can cut a hole through a path drawn shape. This is a technique known as donut holes and you can see an example on my index page If this looks difficult it is not See the information database and the technique labelled donut holes My site index is http://www.irunmywebsite.com/ Err it used to be. Now you can find a multiple clip path (Imagine seeing a view through several holes} The carousel and the thumbnail holder are just one path... See the Raphael Crousel

A much better example I include below. The central blue region has several holes cut into it. This has multi purpose usage. It is part of what I call a DOM / SVG hybrid solution.

Cut multi purpose holes for a variety of reasons

score 1 · Answer 2 · answered Jan 26 '12 at 16:39

1

I don't think you can do it via Raphael. You can do it by manipulating the DOM directly, but you will loose the ability to call Raphael methods for that element.

I find Raphael a bit obsolete, now that IE supports SVG. You can do much more with plain javascript and and the SVG specification.

answered Jan 26 '12 at 16:39

mihai

37,072
9
60
86

7

Not many of us have the luxury of only writing for the latest browser, so I think that obsolete is a bit too strong a term. The other consideration is abstraction; for the same reason that many folks find using jQuery (or whatever your favorite js lib is) more productive than bare javascript, I think there is is plenty of room for libs to be written on top of SVG and Canvas. Though on this last point there are a lot of others to choose from. – Matthew Nichols Jan 26 '12 at 23:31
3

I agree on the abstraction, but I prefer those libs which work with the DOM rather then their own objects. Libraries like Raphael will always support only a subset of features from the original spec, and there's the disadvantage of having to wait for a new version to get a bug fixed or a new feature added. Sometimes the subset of features is enough to get something running, sometimes it's not. – mihai Jan 27 '12 at 10:18

score 0 · Answer 3 · edited May 23 '17 at 12:29

If, like in the example image, it's a raster image (png, gif, jpg... bitmap pixel images) you are trying to clip, it's actually really easy. In Raphael 2, you just set the fill to point at the image file. It uses it as a background image.

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

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

Limitations (AFAIK):

Only one image per path
Only one path per image (use compound paths for complex masks)
Things like background position aren't easy - see this question for more
I think it's impossible to stop the image repeating

clip-path in Raphaël.js

3 Answers3

Linked