Please see the code below. I am trying to draw a circle around a path (an icon made by Raphael.js founder, Dimitry) and then fill the circle with a color. This, however, paints on the top of the path. If I could first draw the filled circle and then draw the path, this would be solved. But I need to reference the path because I need to find its center, in order to draw the circle. Can anyone please suggest how to do this? My code is below.

Thanks.

<script>
    var myVar = {
            s: 1,                           
            pw: 850,
            ph: 450
        }                   
</script>

<script>
    var paper = new Raphael('figSellerBuyer', myVar.pw * myVar.s, myVar.ph * myVar.s);

    var market = paper.path(paths.marketBoundary);
    market.attr({fill: "rgb(75,245,75)", stroke: "None"});


    var humanIcon = paper.path("M21.021,16.349c-0.611-1.104-1.359-1.998-2.109-2.623c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.307,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.932,1.139,5.307,2.543,5.307c0.846,0,1.265-0.865,1.466-2.189c0.201,1.324,0.62,2.189,1.463,2.189c1.406,0,2.545-2.375,2.545-5.307c0-0.66-0.061-1.291-0.168-1.873c0.598,0.574,1.174,0.803,1.725,0.496C22.602,21.541,22.443,18.912,21.021,16.349zM15.808,13.757c2.362,0,4.278-1.916,4.278-4.279s-1.916-4.279-4.278-4.279c-2.363,0-4.28,1.916-4.28,4.279S13.445,13.757,15.808,13.757z")

    humanIcon.attr({fill: "rgb(75,75,75)"}).scale(2.5,2.5);
    humanIcon.translate(40,40);

    var bbox = humanIcon.getBBox();

    var xcenter = Math.round(bbox.x + bbox.width/2.0);
    var ycenter = Math.round(bbox.y + bbox.height/2.0);

    var circle = paper.circle(xcenter, ycenter, 40);
    circle.attr({fill:"white"});



</script>       

Please see the code below. I am trying to draw a circle around a path (an icon made by Raphael.js founder, Dimitry) and then fill the circle with a color. This, however, paints on the top of the path. If I could first draw the filled circle and then draw the path, this would be solved. But I need to reference the path because I need to find its center, in order to draw the circle. Can anyone please suggest how to do this? My code is below.

Thanks.

<script>
    var myVar = {
            s: 1,                           
            pw: 850,
            ph: 450
        }                   
</script>

<script>
    var paper = new Raphael('figSellerBuyer', myVar.pw * myVar.s, myVar.ph * myVar.s);

    var market = paper.path(paths.marketBoundary);
    market.attr({fill: "rgb(75,245,75)", stroke: "None"});


    var humanIcon = paper.path("M21.021,16.349c-0.611-1.104-1.359-1.998-2.109-2.623c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.307,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.932,1.139,5.307,2.543,5.307c0.846,0,1.265-0.865,1.466-2.189c0.201,1.324,0.62,2.189,1.463,2.189c1.406,0,2.545-2.375,2.545-5.307c0-0.66-0.061-1.291-0.168-1.873c0.598,0.574,1.174,0.803,1.725,0.496C22.602,21.541,22.443,18.912,21.021,16.349zM15.808,13.757c2.362,0,4.278-1.916,4.278-4.279s-1.916-4.279-4.278-4.279c-2.363,0-4.28,1.916-4.28,4.279S13.445,13.757,15.808,13.757z")

    humanIcon.attr({fill: "rgb(75,75,75)"}).scale(2.5,2.5);
    humanIcon.translate(40,40);

    var bbox = humanIcon.getBBox();

    var xcenter = Math.round(bbox.x + bbox.width/2.0);
    var ycenter = Math.round(bbox.y + bbox.height/2.0);

    var circle = paper.circle(xcenter, ycenter, 40);
    circle.attr({fill:"white"});



</script>       

• javascript
• raphael

• 1 Why not to just repaint the path on top of the circle once you've figured out its center? Probably not optimal but ought to do the trick. – Juho Vepsäläinen Commented Dec 25, 2011 at 17:58
• Probably that would work. Should have thought of that. But I found a better solution; I have included it below. – Curious2learn Commented Dec 29, 2011 at 18:47

3 Answers 3

After doing a lot of search on Google, I found the answer here on Stackoverflow. At the time, I did not save the link to the answer and I don't remember it. If anyone does find it, please edit this answer and post it. However, I did record the solution and here it is:

One can use the insertBefore() and insertAfter() functions in Raphael. In the example code given in the question, one can do this by changing the last line to:

circle.attr({fill:"white"}).insertBefore(humanIcon);

Thanks to those who responded.

Try changing the order in which the two are drawn. That or look over the Raphael docs to see if there is a "Z-index" attribute that can be used to permanently modify the position of the path on the stack of render-able layers.

Edit: I didn't read your explanation well enough. If you could declare your object without drawing it perhaps you could grab the BBox, and then draw it later.

Edit, Edit: SVG has a "defs" tag to create objects without drawing them, so it stands to reason that Raphael can handle it too.

Try using Raphael's Element.toBack() and Element.toFront().

In your case, it sounds like you want to draw the path, then draw the circle, then call either circle.toBack() or path.toFront().