Raphael.js - 円の塗りつぶし属性を使用すると、円の要素が消えます。それを避ける方法は？

Question

下記のコードをご覧ください。私はパス（Raphael.jsの創始者、Dimitryによって作られたアイコン）の周りに円を描き、その円を色で塗りつぶしようとしています。しかし、これはパスの上に塗りつぶします。最初に塗りつぶされた円を描き、次にその道を描くことができれば、これは解決されるでしょう。しかし、私は円を描くために、その中心を見つける必要があるので、パスを参照する必要があります。誰もこれを行う方法をお勧めしますか？私のコードは以下の通りです。

ありがとうございました。

<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>  

Answer 1

Googleで多くの検索を行った後、私はここで答えをStackoverflowで見つけました。当時、私は答えへのリンクを保存せず、私はそれを覚えていません。もし誰かがそれを見つけたら、この答えを編集して投稿してください。しかし、私は解決策を記録しました。ここでは：

insertBefore()とinsertAfter()関数をRaphaelで使用できます。問題のコード例では、最後の行を次のように変更することでこれを行うことができます。

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

回答した方に感謝します。

Answer 2

2つの描画順序を変更してみてください。 Raphaelのドキュメントを見て、レンダリング可能なレイヤーのスタック上のパスの位置を永続的に変更するために使用できる「Z-インデックス」属性があるかどうかを確認してください。

編集：あなたの説明を十分に読まなかった。描画しないでオブジェクトを宣言できれば、おそらくBBoxをつかんで後で描画することができます。

編集、編集：SVGにはオブジェクトを作成せずにオブジェクトを作成するための「defs」タグがあり、Raphaelもそれを処理できる理由があります。

Answer 3

RaphaelのElement.toBack()とElement.toFront（）を試してみてください。

パスを描画してから円を描画してから、circle.toBack()またはpath.toFront()のいずれかを呼び出しているように見えます。