Using jQuery with Raphael

问题

I have created an image map with Raphael. I want the div containing the Raphael canvas to fade out using jQuery when one of the paths in the image map (path10 in the example below) is clicked. The code below does not work, but am I on the right track?

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

回答1:

Almost there... this works (tested on 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>

来源：https://stackoverflow.com/questions/3613636/using-jquery-with-raphael

标签

jquery

svg

raphael