How to achieve 'donut holes' with paths in Raphael

Question

I'd like to draw a shape which has holes in it such that I can fill the shape it and not have the holes filled with that colour (leave them transparent).

According to the W3 path spec:

Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.

Can somebody please give a very simple example of how to perform this with a vector path in Raphael?

Thanks very much.

Answer 1

This turns out to be quite straightforward if you know the trick. For example this doesn't work:

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + 
          " M 75 75 L 75 125 L 125 125 L 125 75 z")
.attr("fill", "#f00");

But this does work*:

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
          " M 75 75 L 125 75 L 125 125 L 75 125 z")
.attr("fill", "#f00");

The difference is that for the donut to appear the the inner path has to have it's vertices drawn in reverse order to the outer path (ie. draw one clockwise, the other anti-clockwise). A tidbit I found on the text.xml.svg.devel archives.

(*) At least, it works in Chrome, Opera and Firefox 4.0 beta, but not in 3.6