Raphael JS: how to use jQuery selectors for objects in IE?

Question

I am trying to use Raphael JS, but jQuery selectors do not seem to work with Raphael JS in IE8.

In Chrome and Firefox, this works:

var paper = ScaleRaphael("test", 500, 500); var c = paper.circle(50, 50, 40); c.node.setAttribute('class','bluecircle'); $('.bluecircle').attr({fill: 'blue'}); 

But in Internet Explorer (IE8, which uses VML instead of SVG), nothing is displayed.

Basically what I'm trying to do is give each object a class, so I can use the JQuery selector to manage all objects at once that have a specific class ...

Does anyone know how to do this, which also works in IE?

Answer 1

This is not the same as using classes to refer to a group of objects, but I wrote a patch against Raphael to allow named sets. Just call paper.set('uniqueID', element1, element2, ...) . Elements contain an array of groups with each group to which they were assigned, and the upper Raphael document has a dictionary of groups to which a unique identifier is entered.

The following test code shows how you can apply a hover handler to a named set and use the hover callback to turn all group members black on hover:

 var marker1 = paper.circle(50, 20, 10).attr({'fill' : '#ff0000'}); var marker2 = paper.circle(100, 20, 10).attr({'fill' : '#ff0000'}); var marker3 = paper.circle(150, 20, 10).attr({'fill' : '#ff0000'}); var marker4 = paper.circle(200, 20, 10).attr({'fill' : '#ff0000'}); var s = paper.set('setID', marker1, marker2); s.push(marker3, marker4); s.pop(); // If marker 1, 2, or 3 is hovered, act on whole group s.hover(function() { for (var i = 0, ii = this.groups.length; i < ii; ++i) { var set = this.paper.groups[this.groups[i]]; for (var j = 0, jj = set.items.length; j < jj; ++j) { set.items[j].attr({'fill' : '#000000'}); } } }); 

Answer 2

I would try

 c.node.className = 'bluecircle';