I'm trying to put an image inside a circle but no success. This is my code:

//Elms.raphael() is my stage.
var circle  = Elms.raphael().circle( 730, 200, 0 );
circle.attr( { fill : 'url(myImg.jpg)' } );                 

setTimeout( function()
{
   circle.animate( { 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300 );
}, 250 );

Instead of put the image in the circle It get colored with black ("#333"). I also tried to make an image-object but still doesn't work.

A little help please?

I'm trying to put an image inside a circle but no success. This is my code:

//Elms.raphael() is my stage.
var circle  = Elms.raphael().circle( 730, 200, 0 );
circle.attr( { fill : 'url(myImg.jpg)' } );                 

setTimeout( function()
{
   circle.animate( { 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300 );
}, 250 );

Instead of put the image in the circle It get colored with black ("#333"). I also tried to make an image-object but still doesn't work.

A little help please?

• javascript
• jquery
• raphael

2 Answers 2

Another way to do, if you have separate image and want to bring it over you circle object.

This makes the whole image appear with smaller size that fits you circle. DEMO

var r = new Raphael(10,10, 500, 500);
var c = r.circle(200, 200, 80).attr({stroke: 'red', "stroke-width" : 3});

var img = r.image("http://www.eatyourcareer./wp-content/uploads/2012/06/ok-256x2561.png", 100, 105, 200, 200);

Here's a link to how I created a circle with an image in it: jsfiddle

var paper = Raphael(document.getElementById("test"), 320, 200);

var circle = paper.circle(100, 100, 50);
circle.attr({
    fill: 'url(http://upload.wikimedia/wikipedia/mons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg)'
});

I left the animate out entirely to keep it as basic as I could. It seems to work fine and is very similar to your code. If you cannot see it in the example it may be a browser issue.