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

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');