how to add a css class to a Raphael object

Question

I'm trying to create a webpage which using a lot of Raphael objects like lines, rectangles, circle. I'm using different colors for each of the event on these objects like onmouseover one color, onmouseout another etc.. So since I have a lot of styling I was wondering if I can specify a css class to these objects. I tried using the following code on IE, but I could not see the styling effect

rectObj.attr('class','mediumBold');

mediumBold is one the defined css class.

I'm fairly new to this. Any pointer will be helpful.

Thanks.

Answer 1

Firstly, I did not know about this js tool. Looks awsome. Coming back to the solution, a change is needed for Raphael.js in order to make this work. I an referring to the uncompressed source file here. At line number 78 there is a property called availableAttrs which lists all the possible attributes that can be set using attr() function. change that property to include class with a default value like below:

availableAttrs = {
    blur: 0, 
   "clip-rect": "0 0 1e9 1e9", 
    cursor: "default", 
    cx: 0, 
    cy: 0,
    fill: "#fff", 
   "fill-opacity": 1, 
    font: '10px "Arial"', 
   "font-family": '"Arial"', 
   "font-size": "10", 
   "font-style": "normal", 
   "font-weight": 400, 
    gradient: 0, 
    height: 0, 
    href: "http://raphaeljs.com/", 
    opacity: 1, 
    path: "M0,0", 
    r: 0, 
    rotation: 0, 
    rx: 0, 
    ry: 0, 
    scale: "1 1", 
    src: "", 
    stroke: "#000", 
   "stroke-dasharray": "", 
   "stroke-linecap": "butt", 
   "stroke-linejoin": "butt", 
   "stroke-miterlimit": 0, 
   "stroke-opacity": 1, 
   "stroke-width": 1, 
    target: "_blank", 
   "text-anchor": "middle", 
    title: "Raphael", 
    translation: "0 0", 
    width: 0, 
    x: 0, 
    y: 0, 
    class:""

},

Once this change is done class attributes can be assigned using attr function.

P.S: Please check the licensing terms before changing the script and using it.

Answer 2

The way i'm doing it:

var rph = Raphael("target",100,100);

var p = rph.rect(0, 0, 12, 12, 1);

p.node.setAttribute("class","track");

Answer 3

Why don't you simply add the "addClass" method to all Element instances?

Like this:

Raphael.el.addClass = function(className) {
    this.node.setAttribute("class", className);
    return this;
};

Then, you can do:

rectObj.addClass('mediumBold');

Answer 4

Raphael's attr is different to jQuery's attr as it's designed for SVG specifically. I wouldn't mess about with this and use the different libraries for their different purposes. To use rectObj with jQuery, you have to get the actual DOM element via rectObj.node:

$(rectObj.node).addClass("mediumBold");

If you're not using jQuery, you can do:

rectObj.node.className += " mediumBold";