将jQuery与Raphael一起使用_Jquery_Svg_Raphael

将jQuery与Raphael一起使用

jquery svg

将jQuery与Raphael一起使用,jquery,svg,raphael,Jquery,Svg,Raphael,我已经创建了一个图像地图与拉斐尔。我希望在单击图像映射中的一个路径（下面示例中的路径10）时，使用jQuery使包含Raphael画布的div淡出。下面的代码不起作用，但我的思路正确吗 <script type="text/javascript" charset="utf-8"> window.onload = function () { var R = Raphael("canvas", 1050, 550); var attr = {

我已经创建了一个图像地图与拉斐尔。我希望在单击图像映射中的一个路径（下面示例中的路径10）时，使用jQuery使包含Raphael画布的div淡出。下面的代码不起作用，但我的思路正确吗

<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>


window.onload=函数（）{
var R=拉斐尔（“画布”，1050550）；
变量属性={
填写：“bbb”，
“填充不透明度”：1，
笔画：“222”，
“笔划宽度”：0.3，
“笔划线条连接”：“圆形”
};
路径10=R.path（“m 221.63509150.81487 97.24682,0,89.68452-97.24682,0，-89.68452 z”）.attr（attr）；
};
path10.node.setAttribute（“id”，“barry”）；
$（文档）.ready（函数（）{
$（“#巴里”）。单击（函数（）{
$（“#画布”）.fadeOut（）；
});
});

就快到了。。。这是可行的（在Firefox 3.6.8上测试）：


$（“文档”）.ready（函数（）{
var R=拉斐尔（“画布”，1050550）；
变量属性={
填写：“bbb”，
“填充不透明度”：1，
笔画：“222”，
“笔划宽度”：0.3，
“笔划线条连接”：“圆形”
};
路径10=R.path（“m 221.63509150.81487 97.24682,0,89.68452-97.24682,0，-89.68452 z”）.attr（attr）；
path10.node.setAttribute（“id”，“barry”）；
$（“#巴里”）。单击（函数（）{
$（“#画布”）.fadeOut（）；
});     
});

永远不要触摸节点属性。路径10.单击（很好。我知道这个问题很老了，我很欣赏答案，但我很好奇你是否知道一种方法可以使用jquery和多变量数据来实现这一点，我使用JSP和JSTL获得了这些数据？我尝试了循环和创建多个div，但我遇到了一个问题，因为我的第一段代码是在1 Raphael函数中，而且显然，我不能在脚本中创建新的div，我必须创建一个循环，用脚本创建div，但这不起作用……知道如何让它工作吗？

<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>