首先，我是一个真正的虚拟javascript，我有很多路径，点击一个按钮后，我希望沿特定路径移动图形。
这意味着：点击，图形出现，跟随路径并消失。 每个Button都有自己的路径。我有3种不同的gfx。
我正在使用Raphael JS 2.1.2 DEMO：http://jsfiddle.net/algoti/1c65zzrv/
// GRAPHICS -----------------------------------------------------------------------------------------------
var gfx1 = rsr.set();
gfx1.push(
rect_a1 = rsr.rect(6.093, 6.093, 69.146, 86.48), rect_a1.attr({x: '6.093',y: '6.093',fill: '#FFFFFF'}),
path_b1 = rsr.path("M81.332,98.666H0V0h81.332V98.666z M12.186,86.48h56.961V12.186H12.186V86.48z"), path_b1.attr({fill: '#91BA19'}),
rect_c1 = rsr.rect(21.277, 32.203, 3.265, 9.685), rect_c1.attr({x: '21.277',y: '32.203',fill: '#91BA19'}),
rect_d1 = rsr.rect(27.303, 26.195, 3.265, 21.702), rect_d1.attr({x: '27.303',y: '26.195',fill: '#91BA19'}),
rect_e1 = rsr.rect(32.82, 29.531, 3.265, 15.026), rect_e1.attr({x: '32.82',y: '29.531',fill: '#91BA19'}),
rect_f1 = rsr.rect(38.969, 23.524, 3.264, 27.042), rect_f1.attr({x: '38.969',y: '23.524',fill: '#91BA19'}),
rect_g1 = rsr.rect(44.871, 29.531, 3.26, 15.026), rect_g1.attr({x: '44.871',y: '29.531',fill: '#91BA19'}),
rect_h1 = rsr.rect(50.892, 26.195, 3.265, 21.702), rect_h1.attr({x: '50.892',y: '26.195',fill: '#91BA19'}),
rect_i1 = rsr.rect(56.786, 32.203, 3.265, 9.685), rect_i1.attr({x: '56.786',y: '32.203',fill: '#91BA19'})
);
gfx1.attr({
stroke: 'none',
});
var gfx2 = rsr.set();
gfx2.push(
rect_a2 = rsr.rect(6.176, 6.176, 70.078, 87.648), rect_a2.attr({x: '6.176',y: '6.176',fill: '#FFFFFF'}),
path_b2 = rsr.path("M82.43,99.998H0V0h82.43V99.998z M12.35,87.648h57.73V12.35H12.35V87.648z"), path_b2.attr({fill: '#DEDA00'}),
path_c2 = rsr.path("M56.388,66.555H26.042V33.443h30.346V66.555z M28.973,64.11h24.484V35.888H28.973V64.11z"), path_c2.attr({fill: '#DEDA00'}),
rect_d2 = rsr.rect(32.897, 37.714, 16.402, 2.447), rect_d2.attr({x: '32.897',y: '37.714',fill: '#DEDA00'}),
rect_e2 = rsr.rect(32.897, 42.775, 16.402, 2.443), rect_e2.attr({x: '32.897',y: '42.775',fill: '#DEDA00'}),
rect_f2 = rsr.rect(32.897, 47.837, 16.402, 2.443), rect_f2.attr({x: '32.897',y: '47.837',fill: '#DEDA00'}),
rect_g2 = rsr.rect(32.897, 52.894, 16.402, 2.448), rect_g2.attr({x: '32.897',y: '52.894',fill: '#DEDA00'}),
rect_h2 = rsr.rect(32.897, 57.955, 16.402, 2.444), rect_h2.attr({x: '32.897',y: '57.955',fill: '#DEDA00'})
);
gfx2.attr({
stroke: 'none',
});
var gfx3 = rsr.set();
gfx3.push(
rect_a3 = rsr.rect(5.993, 5.99, 68.013, 85.06), rect_a3.attr({x: '5.993',y: '5.99',fill: '#FFFFFF'}),
path_b3 = rsr.path("M80,97.043H0V0h80V97.043z M11.985,85.059h56.027V11.984H11.985V85.059z"), path_b3.attr({fill: '#00A4E2'}),
path_c3 = rsr.path("M 59.212,49.438 36.079,49.438 36.079,36.15 36.079,22.712 59.212,22.712 z"), path_c3.attr({fill: '#00A4E2'}),
path_d3 = rsr.path("M 20.787,22.712 20.787,49.513 36.079,36.079 z"), path_d3.attr({fill: '#00A4E2'})
);
gfx3.attr({
stroke: 'none',
});
// PATH ------------------------------------------------------------------------------------------------------
var pathgroup = rsr.set();
pathgroup.push(
p1 = rsr.path("m 1761.4324,1166.5479 0,-35.5228 -1179.04362,0 0,51.1511"), p1.attr({id: 'p1'}),
p2 = rsr.path("m 657.6606,1183.664 0,-50.9931 1104.0614,0 0,33.877"), p2.attr({id: 'p2'}),
p3 = rsr.path("m 733.492,1184.4672 0,-54.265 1029.8759,0 0,36.3457"), p3.attr({id: 'p3'}),
p4 = rsr.path("m 807.6184,1183.664 0,-52.6389 953.814,0 0,35.5228"), p4.attr({id: 'p4'}),
p5 = rsr.path("m 921.5465,1179.5759 0,-48.5508 839.8859,0 0,35.5228"), p5.attr({id: 'p5'}),
p6 = rsr.path("m 998.8986,1180.3988 0,-48.5508 762.5338,0 0,34.6999"), p6.attr({id: 'p6'}),
p7 = rsr.path("m 1075.4278,1180.3988 0,-47.7279 686.2942,0 0,33.877"), p7.attr({id: 'p7'}),
p8 = rsr.path("m 1149.4883,1180.3988 0,-50.1966 614.7025,0 0,36.3457"), p8.attr({id: 'p8'}),
p9 = rsr.path("m 1227.6633,1180.3988 0,-48.5508 534.0587,0 0,34.6999"), p9.attr({id: 'p9'}),
p10 = rsr.path("m 1310.9601,1183.664 0,-50.1702 449.1162,0 0,33.0541"), p10.attr({id: '10'}),
p11 = rsr.path("m 1385.6592,1179.5759 0,-47.7279 376.8857,0 0,34.6999"), p11.attr({id: 'p11'}),
p12 = rsr.path("m 1460.5426,1178.753 0,-48.5508 300.8898,0 0,36.3457"), p12.attr({id: 'p12'})
);
pathgroup.attr({
fill: 'none',
opacity: '1',
stroke: '#000',
});
// BUTTONS ---------------------------------------------------------------------------------------------------
var clicker = rsr.set();
clicker.push(
c1 = rsr.path("m 554.95017,1182.8675 53.08003,0 0,51.8423 -53.08003,0 z"), c1.attr({ title: '1'}), //gfx1 on p1
c2 = rsr.path("m 630.65654,1182.8675 53.07996,0 0,51.8423 -53.07996,0 z"), c2.attr({ title: '2'}), //gfx1 on p2
c3 = rsr.path("m 705.54,1182.8675 53.08,0 0,51.8423 -53.08,0 z"), c3.attr({ title: '3'}), //gfx1 on p3
c4 = rsr.path("m 780.8578,1182.8016 53.0801,0 0,51.8424 -53.0801,0 z"), c4.attr({ title: '4'}), //gfx1 on p4
c5 = rsr.path("m 897.6826,1182.8675 53.08,0 0,51.8423 -53.08,0 z"), c5.attr({ title: '5'}), //gfx2 on p5
c6 = rsr.path("m 972.566,1182.4593 53.08,0 0,51.8424 -53.08,0 z"), c6.attr({ title: '6'}), //gfx2 on p6
c7 = rsr.path("m 1048.2723,1182.8675 53.08,0 0,51.8423 -53.08,0 z"), c7.attr({ title: '7'}), //gfx2 on p7
c8 = rsr.path("m 1123.5705,1182.8675 53.08,0 0,51.8423 -53.08,0 z"), c8.attr({ title: '8'}), //gfx2 on p8
c9 = rsr.path("m 1202.1536,1182.0446 53.08,0 0,51.8424 -53.08,0 z"), c9.attr({ title: '9'}), //gfx2 on p9
c10 = rsr.path("m 1283.6202,1183.2823 53.08,0 0,51.8423 -53.08,0 z"), c10.attr({ title: '10'}), //gfx3 on p10
c11 = rsr.path("m 1359.7413,1182.4593 53.08,0 0,51.8424 -53.08,0 z"), c11.attr({ title: '11'}), //gfx3 on p11
c12 = rsr.path("m 1435.4476,1183.2823 53.08,0 0,51.8423 -53.08,0 z"), c12.attr({ title: '12'}) //gfx3 on p12
);
clicker.attr({
fill: '#000',
opacity: '0',
stroke: 'none',
cursor: 'pointer',
href: '#',
});
clicker.hover(
function(){
this.animate({
"opacity": "0.2"
}, 100);
},
function(){
this.animate({
"opacity": "0"
}, 100)
}
);