Question

I am trying to access and update certain attributes of an element in a Raphael canvas when the mouseover and mouseout events trigger..

Since the documentation is sparse, I have been struggling with this for a while.

The following code fails with an error of Object #<SVGCircleElement> has no method 'attr'

        $(circle.node).mouseover(function (e) {
            e.target.attr({ 'opacity': 0.2, 'fill': 'blue', 'stroke': 'white' });
        });

The (non) functioning code is available here: http://jsfiddle.net/agarcian/mDnAb/3/

Any help will be greatly appreciated.

Answer 1

You need to use $(e.target).attr(...) since e.target is a plain DOM element and not jQuery-wrapped yet.

With this change it works fine: http://jsfiddle.net/ThiefMaster/mDnAb/4/

Btw, you can use .hover() instead of the two separate events: http://jsfiddle.net/ThiefMaster/mDnAb/5/