circle image mask via raphael js?

Question

i'm trying to get an image in a circle and so i added an image to my circle using "fill"url, but can't seem to find an answer on how to position the image within the circle nor how to stop it from repeating. i love raphael.js, but its documentation is sorely lacking both in clarity and examples.

i heard that one should make a custom path in the shape of a circle then place the image behind it as its own object that way it could be positioned, but unfortunately i'm unsure on how to achieve this...any thoughts?

Answer 1

Try this

var paper = Raphael(30,30, 200,200);
paper.rect(0, 0, 200, 200, 600).attr({
    fill: "url(http://4.bp.blogspot.com/-gqd6i4K8I1I/UBLYjrsiRXI/AAAAAAAAAJA/0eqdIoY0zI4/s640/nelli-puli.jpg)",
    "stroke-width": 2
});​

DEMO here http://jsfiddle.net/Nz3Hv/2/