为不同的路径应用不同的颜色，其中每个路径都在 raphael.js 集中

Question

这里我有一个JS Fiddle，它解释了我正在使用 raphael.js 做什么。我是 raphael 的新手，有 1 周的经验。我真的很喜欢它的力量。但是，我总是倾向于在早期以简单的方式做事，以避免以后的混乱。现在，问题。如您所见，有黑色描边和红色描边的立方体。立方体（六边形或任何你称之为的）有三个可见的边。当我将鼠标悬停在它们上方时，我希望它们填充一些颜色。我希望所有三个面都有不同的颜色。我还将在悬停时为其添加工具提示。现在所有这一切都非常简单，使用 CSS 或 jQuery 就可以了。如果可能的话，我更喜欢 CSS。现在，有没有一种可能的方法可以让我将 raphael 的东西留在这里并将其集成到 CSS/jQuery 以继续使用它们进行进一步修改，以便我可以在整个项目中让我的生活更轻松？我使用 raphael 作为浏览器支持应该是 IE9+（是的！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/

更新：

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

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