Raphael.js - 使用圆的填充属性，使圆中的元素消失。如何避免这种情况？答案

【问题标题】：Raphael.js - Using fill attribute for a circle, makes the element in the circle disappear. How to avoid that?Raphael.js - 使用圆的填充属性，使圆中的元素消失。如何避免这种情况？
【发布时间】：2011-12-30 02:47:42
【问题描述】：

请看下面的代码。我正在尝试围绕路径（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>

【问题讨论】：

为什么不在圆的中心重新绘制路径呢？可能不是最佳的，但应该可以解决问题。
这可能行得通。早该想到的。但我找到了更好的解决方案；我已将其包含在下面。

标签： javascript raphael

【解决方案1】：

在 Google 上进行了大量搜索后，我在 Stackoverflow 上找到了答案。当时，我没有保存答案的链接，我不记得了。如果有人找到它，请编辑此答案并发布。但是，我确实记录了解决方案，这里是：

可以使用 Raphael 中的 insertBefore() 和 insertAfter() 函数。在问题中给出的示例代码中，可以通过将最后一行更改为：

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

感谢回复的人。

【讨论】：

【解决方案2】：

尝试更改两者的绘制顺序。或者查看 Raphael 文档，看看是否有一个“Z-index”属性可用于永久修改路径在可渲染层堆栈上的位置。

编辑：我没有很好地阅读您的解释。如果您可以在不绘制的情况下声明您的对象，也许您可以抓住 BBox，然后再绘制它。

编辑，编辑：SVG 有一个“defs”标签，可以在不绘制对象的情况下创建对象，因此 Raphael 也可以处理它是理所当然的。

【讨论】：

【解决方案3】：

尝试使用 Raphael 的 Element.toBack() 和 Element.toFront()。

在您的情况下，听起来您想绘制路径，然后绘制圆圈，然后调用circle.toBack() 或path.toFront()。

【讨论】：