将不同的路径应用于不同的路径，其中每条路径都在raphael.js集内

Question

这里我有一个JS Fiddle，它解释了我在使用raphael.js时所做的。我是拉菲尔新手，拥有1周体验。我真的很喜欢它的力量。但是，我总是倾向于在早期阶段以一种简单的方式做事，以避免后来的混乱。现在，解决问题。正如你所看到的那样，有黑色中风和红色中风的立方体。立方体（六角形或任何你称之为）有三个可见面。当我徘徊在他们身上时，我希望他们填补一些颜色。我希望所有三面都有不同的颜色。我也将在悬停时添加一个工具提示。现在，使用CSS或jQuery来解决这个问题非常简单。如果可能的话，我更喜欢CSS。现在，有没有可能的办法让我把这些raphael的东西放在这里，并将它集成到CSS/jQuery中，以便继续使用它们进行修改，这样我可以在整个项目中让我的生活更轻松？我用raphael作为浏览器支持应该是IE9 +（Yes！IE再次破坏它）。如果不推荐这种方式，我非常感谢你们中的一些人能否解释我可以使用raphael本身做到这一点的可能方式（没有太多并发症）。这里的问题是每个路径都在集合内部。

JS（拉斐尔）

(function() { 
    var paper = Raphael("paper", "100%", "100%"); 
    var cube1 = paper.set(); 
    var cube2 = paper.set(); 
    var cube3 = paper.set(); 
    var cube4 = paper.set(); 
    var cube5 = paper.set(); 
    var cube6 = paper.set(); 
    var cube7 = paper.set(); 
    // animate the set 
    var anim = Raphael.animation({ 
     opacity: 1 
    }, 500); 

    // middle cube 
    cube1.push(
     paper.path("M190 200 L260 160 330 200 260 240 190 200"), 
     paper.path("M260 240 L330 200 330 280 260 320 260 240"), 
     paper.path("M260 240 L260 320 190 280 190 200 260 240") 
    ) 
    cube1.attr({ 
     stroke: "#ffffff", 
     'stroke-width': 2, 
     opacity: 0 
    }).animate(anim); 
    // second cube 
    cube2.push(
     paper.path("M190 200 L260 160 330 200 260 240 190 200"), 
     paper.path("M260 240 L330 200 330 280 260 320 260 240"), 
     paper.path("M260 240 L260 320 190 280 190 200 260 240") 
    ) 

    cube2.transform("t0 -80").attr({ 
     stroke: "#000000", 
     opacity: 0 
    }).animate(anim.delay(500)); 
    // third cube 
    cube3.push(
     paper.path("M190 200 L260 160 330 200 260 240 190 200"), 
     paper.path("M260 240 L330 200 330 280 260 320 260 240"), 
     paper.path("M260 240 L260 320 190 280 190 200 260 240") 
    ) 
    cube3.transform("t70 -40").attr({ 
     stroke: "red", 
     opacity: 0 
    }).animate(anim.delay(1000)); 
    // fourth cube 
    cube4.push(
     paper.path("M190 200 L260 160 330 200 260 240 190 200"), 
     paper.path("M260 240 L330 200 330 280 260 320 260 240"), 
     paper.path("M260 240 L260 320 190 280 190 200 260 240") 
    ) 
    cube4.transform("t70 40").attr({ 
      opacity: 0 
     }).animate(anim.delay(1500)) 
     // fifth cube 
    cube5.push(
     paper.path("M190 200 L260 160 330 200 260 240 190 200"), 
     paper.path("M260 240 L330 200 330 280 260 320 260 240"), 
     paper.path("M260 240 L260 320 190 280 190 200 260 240") 
    ) 
    cube5.transform("t0 80").attr({ 
      stroke: "red", 
      opacity: 0 
     }).animate(anim.delay(2000)) 
     // sixth cube 
    cube6.push(
     paper.path("M190 200 L260 160 330 200 260 240 190 200"), 
     paper.path("M260 240 L330 200 330 280 260 320 260 240"), 
     paper.path("M260 240 L260 320 190 280 190 200 260 240") 
    ) 
    cube6.transform("t-70 40").attr({ 
      opacity: 0 
     }).animate(anim.delay(2500)) 
     // seventh cube 
    cube7.push(
     paper.path("M190 200 L260 160 330 200 260 240 190 200"), 
     paper.path("M260 240 L330 200 330 280 260 320 260 240"), 
     paper.path("M260 240 L260 320 190 280 190 200 260 240") 
    ) 
    cube7.transform("t-70 -40").attr({ 
      stroke: "red", 
      opacity: 0 
     }).animate(anim.delay(3000)) 
     //use of settimeout for second animation 
    setTimeout(function() { 
     // Do something after 5 seconds 
     cube2.animate({ 
      transform: "t0 -160" 
     }, 300) 
     cube3.animate({ 
      transform: "t140 -80" 
     }, 300) 
     cube4.animate({ 
      transform: "t140 80" 
     }, 300) 
     cube5.animate({ 
      transform: "t0 160" 
     }, 300) 
     cube6.animate({ 
      transform: "t-140 80" 
     }, 300) 
     cube7.animate({ 
      transform: "t-140 -80" 
     }, 300) 
    }, 4000); 
    // hover for set 
    function getHoverHandler(setName, fillColor) { 
     return function() { 
      setName.attr({ 
       fill: fillColor, 
       cursor: "pointer" 
      }); 
     }; 
    } 
    cube2.hover(getHoverHandler(cube2, "rgba(0, 0, 0, 1)"), getHoverHandler(cube2, "rgba(0,0,0,0)")); 
    cube3.hover(getHoverHandler(cube3, "rgba(255, 0, 0, 1)"), getHoverHandler(cube3, "rgba(0,0,0,0)")); 
})(); 

我还添加了悬停，但我不愉快的反应迟钝，有时，当我鼠标悬停。

Answer 1

不知道你实际上已经可以做什么以及你仍然需要发现什么，但是你需要把所有东西都放在一个循环中，这样每个元素都被绘制出来。我批量分配的班级，但你可以设置一个ID到你可能想要的个人脸上。希望能帮助到你。

JS：

var R = Raphael(0,0,440,510); 
var coor = [[80,170],[220,90],[360,170],[360,330],[220,410],[80,330]]; 
cube =[]; 
f = []; 
ed = []; 
for(i=0;i<coor.length;i++){ 
R.setStart(); 
f[i[0]] = R.path("M0,0l-70,-40 70,-40 70,40 -70,40"); 
f[i[0]].node.setAttribute("class","red"); 
f[i[1]] = R.path("M0,0l70,-40 0,80-70,40 0,-80"); 
f[i[1]].node.setAttribute("class","green"); 
f[i[2]] = R.path("M0,0l0,80 -70,-40 0,-80 70,40"); 
f[i[2]].node.setAttribute("class","blue"); 
ed[i] = R.path("M0,0l0,80 M0,0l70,-40 M0,0l-70,-40 0,80 70,40 70,-40 0,-80-70,-40-70,40"); 
ed[i].node.setAttribute("class","edges"); 
cube[i] = R.setFinish(); 
cube[i].transform("t" + coor[i][0] + "," + coor[i][1]); 
} 

CSS：

body { 
    background: #e3e3e3; 
} 
.edges { 
    fill:none; 
    stroke:black; 
    stroke-width:1; 
} 
.red { 
    fill:rgba(0,0,0,0); 
    stroke:none; 
} 
.red:hover { 
    fill:red; 
} 
.green { 
    fill:rgba(0,0,0,0); 
    stroke:none; 
} 
.green:hover { 
    fill:green; 
} 
.blue { 
    fill:rgba(0,0,0,0); 
    stroke:none; 
} 
.blue:hover { 
    fill:blue; 
} 

http://jsfiddle.net/crockz/77nfejnz/

UPDATE：

不同的立方体不同的颜色：

http://jsfiddle.net/crockz/77nfejnz/1/