clip-path in Raphaël.js

问题

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

回答1:

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

回答2:

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.

回答3:

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):