使用 jQuery 和 Raphael答案

【问题标题】：Using jQuery with Raphael使用 jQuery 和 Raphael
【发布时间】：2011-04-06 12:45:51
【问题描述】：

我已经用 Raphael 创建了一个图像映射。当单击图像映射中的路径之一（下例中的 path10）时，我希望包含 Raphael 画布的 div 使用 jQuery 淡出。下面的代码不起作用，但我在正确的轨道上吗？

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var R = Raphael("canvas", 1050, 550);
        var attr = {
            fill: "#bbb",
            "fill-opacity": 1,
            stroke: "#222",
            "stroke-width": 0.3,
            "stroke-linejoin": "round"
        };
        path10 = R.path("m 221.63509,150.81487 97.24682,0 0,89.68452 -97.24682,0 0,-89.68452 z").attr(attr);
    };

    path10.node.setAttribute("id","barry");

    $(document).ready(function(){
        $("#barry").click(function(){
            $("#canvas").fadeOut();
        });
    });

</script>

<body>
    <div id="canvas"></div>
</body>

【问题讨论】：

标签： jquery svg raphael

【解决方案1】：

差不多了……这行得通（在 Firefox 3.6.8 上测试）：

<body>
<script type="text/javascript" charset="utf-8">
    $("document").ready(function() {
        var R = Raphael("canvas", 1050, 550);
        var attr = {
            fill: "#bbb",
            "fill-opacity": 1,
            stroke: "#222",
            "stroke-width": 0.3,
            "stroke-linejoin": "round"
        };
        path10 = R.path("m 221.63509,150.81487 97.24682,0 0,89.68452 -97.24682,0 0,-89.68452 z").attr(attr);
        path10.node.setAttribute("id","barry");

        $("#barry").click(function(){
            $("#canvas").fadeOut();
        });     
    });

</script>

<div id="canvas"></div>
</body>

【讨论】：

永远不要碰节点属性。 path10.click( 可以正常工作。
我知道这个问题真的很老了，我很欣赏答案，但我很好奇你是否知道使用 jquery 和我使用 JSP 和 JSTL 获得的多个变量数据来做到这一点的方法？我尝试循环并创建多个 div，但是我遇到了一个问题，因为我的第一块代码在 1 Raphael 函数中，并且由于我显然无法在脚本中创建新的 div，所以我必须创建一个循环，创建 div，使用脚本，但这不起作用......知道如何让它工作吗？