How do I apply CSS styles to Raphael.js objects using jQuery?

Question

Does anybody have any experience with the Raphael.js SVG library?

I'm using Raphael.js to create an SVG map (for use on smartphones) but I'm having trouble opening the map objects that Raphael creates up to outside interaction by jQuery and styling by css.

var R = Array();  
    R[1] = new Raphael("level1", 408, 286);  
    R[2] = new Raphael("level2", 408, 286);  
    R[3] = new Raphael("level3", 408, 286);  
    R[4] = new Raphael("level4", 408, 286);  
    R[5] = new Raphael("level5", 408, 286);  

var attr = {  
    fill: "#ccc",  
    stroke: "#000",  
    "stroke-width": 0.5,  
    "stroke-linecap": "square",  
    "stroke-linejoin": "miter"  
};  

// loop through a bunch of objects (not shown for brevity)
    // in the end, I end up with a couple hundred objects drawn by Raphael  

    var o = R[fID].path(coordstring).attr(attr);  

    // creates an #o[ID] id value that jQuery can target 
    o.node.id = "o"+$(this).attr('id'); // id value comes from data source  

    o.click(function(){  
        highlightMapObject(this.node.id.substr(1));                             
    );  

// end loop  

// accessed from the o.click and from outside in jQuery
function highlightMapObject(oid){  
    var $target = $("#o"+oid);  
    $target.addClass('highlight');  
}  

The issue I seem to be running into is that trying to add a class to the Raphael object doesn't work, or if it is working, the CSS attributes of that class (like changed background colors, etc) aren't being applied.

So if my .highlight class is:

.highlight { background-color: #f00; }

That is either not being applied, or isn't overwriting the fill:"ccc" from the original Raphael attrs. My guess is that because the ID being targeted by jQuery is on the Raphael object NODE rather than the object itself, that's probably part of the problem.

I've seen lots of advice to avoid node altogether when dealing with Raphael, but it seems to be the only way I've found to open a Raphael object up to outside targeting (in this case via jQuery).

I don't have to use CSS to achieve the style change on these objects, but I do have to be able to achieve that change externally (via jQuery - in response to external highlight requests, etc) rather than all internally (via Raphael and only in response to object clicks).

Ideas?

Thanks!

Answer 1

I am not exactly sure what you code is doing, but if you want to get a jQuery object out of a Raphael object then do this:

var $jQueryObject = $(raphaelObject.node);

From there you can use jQuery to add a class:

$jQueryObject.addClass('highlight');

Answer 2

I also found that if you remove the inline styles after rendering the path with raphael.

$('#somediv path').removeAttr('fill').removeAttr('stroke');

then you can style them how ever you want using css

#somediv path { fill: white; }
#somediv:hover path { fill: blue; }

Answer 3

Or you add a class as an attribute

$jQueryObject.attr('class', 'highlight');

This will work instead of

$jQueryObject.addClass('highlight');