Question

When I’m inside a click event I want to run the function on that single Raphael element such as a circle. How can I target that individual element and not all the circles on the page?

JQuery selector – $(this).animate({ opacity: 0.2}, 2000);

I need to know what the equivalent of $(this) is. Or if there is another way of selecting that element?

Answer 1

If you attach an event using Raphael itself, this is the Raphael wrapped element (i.e. this is by default the equivalent of $(selector)).

For example

paper.rect(50, 50, 50, 50)
    .attr('fill', '#000')
    .click(function () {
        // `this` is the rect Raphael object
        this.attr('fill', '#ff0000');  // turn the clicked rect red
    });

To implement the jQuery-style wrapper a weak map implementation is required and these tend to leak. It’s best to use the Raphael api for attaching events to the SVG elements than attaching events to the nodes directly.

Example: http://jsfiddle.net/FyM7z/