9

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?

user1118321
  • 25,567
  • 4
  • 55
  • 86
zero
  • 2,999
  • 9
  • 42
  • 67

1 Answers1

6

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/

kiranvj
  • 32,342
  • 7
  • 71
  • 76
  • 4
    Hmm, this doesn't say how to position this within the circle though and how to prevent it from repeating which is what the OP asked for. Do you have any idea how to do that? – BorisKourt Jan 28 '13 at 16:29