Javascript Raphaeljs图形未在多个引导选项卡中呈现

我一直在编写一个人体应用程序，从患者那里获取关于哪些部位伤害他/她作为医学测试的一部分的信息，为此我使用raphaeljs矢量库创建了一个图像地图

我必须在两个引导选项卡中显示两个骨架图像，每个选项卡中都有一个骨架图像及其圆形占位符，以便用户可以单击它们来选择疼痛或肿胀区域

为了在选项卡1中获得疼痛区域，我首先添加一个png骨架图像作为我的第一个boostrap选项卡的内容

我画黄色圆圈作为疼痛和肿胀部位的占位符

我必须对选项卡2执行相同的操作，这次我必须显示相同的骨架png，但名称不同，例如，我为png图像和占位符复制了选项卡1的相同代码

问题是，黄色圆圈没有在第二个选项卡中渲染（肿胀或“炎症”），而是在第一个选项卡中渲染（疼痛或“疼痛”），我意识到这一点，因为在第一个选项卡中，圆圈重叠，如我在下一幅图中所示

据我所见，Raphael lib无法将第二个制表符圆圈坐标放在隐藏部分，而是将这些坐标放在第一个制表符中。这就是为什么我会有这种行为

有什么想法吗？提前谢谢。 这是我的密码

var style={id:'skeleton'+1，不透明性：'0.65'，填充：'FEEA3E'，笔划宽度：'0'，'stroke-opacity'：'1'}；
var skel=拉斐尔（“骷髅”，150352）；
skel.image（“assets/maps/skeleton.png”，0,0,150352）；
/*=======疼痛=========
为疼痛画骨架*/
//骨架文字
var shapes=新数组（）；
var circles_body=新数组（{xc:27.5，yc:76，r:10}，{xc:100.5，yc:76，r:10}，{xc:12，yc:132，r:10}，{xc:110，yc:132，r:10}，{xc:10.5，yc:178，r:10}，{xc:125，yc:175.5，r:10}，{xc:51，yc:253，r:10}，{xc:72，yc:253R}）；
对于（变量i=0；i




..
1） 多洛
多罗经济区
一般情况下
..
2） 燃烧
燃烧之旅
一般情况下
我的坏，
我将所有圆添加到同一个骨架对象（skel）


然后是另一具骨架

/* ====== SWELLING =========
 Draw skeleton for swelling*/
    ...   
shapes[i]= skel.circle(circles_body_i[i].xc, circles_body_i[i].yc, circles_body_i[i].r);    
    ...

/* ====== SWELLING =========
 Draw skeleton for swelling*/
    ...   
shapes[i]= skel.circle(circles_body_i[i].xc, circles_body_i[i].yc, circles_body_i[i].r);    
    ...