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

Question

这里我有一个 JS Fiddle，它解释了我正在使用 raphael.js 做什么。我刚接触 raphael 1 周 experience.I 真的很喜欢它的强大功能。但是，我总是倾向于在早期阶段以简单的方式做事，以避免以后出现混乱。现在，问题来了。如您所见，有黑色笔划和红色笔划的立方体。立方体（六边形或任何你称之为的东西）有三个可见的边。当我将鼠标悬停在它们上方时，我希望它们填充一些颜色。我希望所有三个面都有不同的颜色。我还将在悬停时向其添加工具提示。现在所有这一切都非常简单，使用 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/

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

Apply different colors for different path where each path is inside a raphael.js set

javascript

jquery

css

svg

raphael