將不同的路徑應用於不同的路徑，其中每條路徑都在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/