Paint rounded border around image using Raphael

Question

Hi, I'm using the Raphael JavaScript library. I'd like to draw a border with rounded edges around an image (which is a Raphael object) but I can't seem to figure out how to do that. I tried to set a stroke but it doesn't appear.

I have this:

var paper = Raphael(10, 50, 500, 500);
var google_img = paper.image("http://www.google.com/images/logos/ps_logo2.png", 10, 10, 200, 200);

Appreciate any help I can get!

Answer 1

I think you are talking about a clipping path. Check out Clipping path on Wikipedia. A short Google away, I found some unfortunate news from Raphaël's Google Group:

A raphael application must run in internet explorer without plugins. [Clipping paths] are available in SVG, but internet explorer doesn't support svg. Instead it uses the propietary microsoft VML "standard" (http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)

So in summary (IMHO) raphael only "can be inside" the intersection of svg operations and VML operations.

(From Does RaphaelJS support clipping masking compositing?, post by Sebastian Gurin).

Check out the thread if you are interested in using a plugin to enable clipping in browsers that support it.

Alternatively, you could try drawing an unfilled, stroked rectangle with the same dimensions at the same location as the image, but with the r attribute of the image set, and the stroke-width large enough to compensate for the radius (note that this may result in hiding the extremities of the image).

Answer 2

How about using image as a fill:

var paper = Raphael(10, 50, 500, 500);
paper.rect(10, 10, 364, 126, 20).attr({
    fill: "url(http://www.google.com/images/logos/ps_logo2.png)",
    "stroke-width": 2
});