Raphael.js - Using the fill attribute for a circle, the element in the circle disappears. How to avoid this?

See code below. I am trying to draw a circle around a path (icon made by the founder of Raphael.js, Dimitry) and then fill the circle with color. This, however, draws at the top of the path. If I could first draw a filled circle and then draw a path, that would be solved. But I need to indicate the path, because I need to find its center in order to draw a circle. Can anyone 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> 
+4
source share
3 answers

After much searching on Google, I found the answer here on Stackoverflow. At that time, I did not save the link to the answer, and I do not remember it. If anyone finds it, edit this answer and post it. However, I wrote down the solution, and here it is:

In Raphael, you can use the insertBefore() and insertAfter() functions. In the sample code asked in the question, you can do this by changing the last line to:

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

Thanks to those who answered.

+5
source

Try changing the order in which these two are drawn. Either check out Rafael's docs to see if there is a "Z-index" attribute that can be used to constantly change the position of a path in a stack of renderable layers.

Edit: I have not read your explanations enough. If you could declare your object without drawing, perhaps you could capture the BBox and then draw it later.

Modify, Modify: SVG has a "defs" tag to create objects without drawing them, so it’s quite clear that Raphael can handle this.

0
source

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

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

0
source

Source: https://habr.com/ru/post/1387940/


All Articles