how to add a css class to a Raphael object

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.

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

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.

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

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";

I've run into the same problem - I wanted more specifically to be able to assign a CSS class to the SVG object created by Raphael. This is the way I made it:

paper= Raphael("thePaperObj", 200, 10); //create a Raphael Obj
paper.canvas.className.baseVal="stretchBar";

the result is that I get a rendered SVG element like this:

<svg class="stretchBar" style="overflow: hidden; position: relative;" width="200" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">

Of course, the class can be defined to contain the desired CSS attributes in a stylesheet.

Hope this can help someone in the future.

I used

$(rectObj.node).attr("class", "mediumBold");

In case anyone else stumbles across this there is a reason Raphael is lacking the ability to set some SVG specific things and that is because it is a tool for creating vector graphics that has a subset of operations that is the common ground between SVG and VML. Extending it with SVG specifics is rather pointless as when VML is used you will lose that functionality. And vice versa of course, there may well be VML things that it doesn't do because SVG does not support that particular feature.