Custom attributes on RaphaelJS nodes in IE8

Question

I have a script like this which adds a basic rectangle to a paper object in RaphaelJS and then sets some custom attributes onto the rectangle:

var furniture = paper
  .rect(0, 0, 100, 200)
  .attr({
    fill: '#ccc'
  })
;


furniture.node.id = 'some-id';
$(furniture.node).attr('class','draggableFurniture');
$(furniture.node).attr('productId','1234');
$(furniture.node).attr('title','Some title');
$(furniture.node).attr('price','123.99');

This works great in IE9 and Firefox/Chrome etc, but doesn't work in IE8 or 7, presumably because these browsers use VML rather than SVG and presumably VML doesn't have a DOM structure which is able to be used like SVG.

I wondered how it's possible to get my custom attributes into these objects consistently across all browsers (well, including IE8 & 7 at least)?

Thanks folks!

Answer 1

Sorted! There is a method in the Raphael API called 'data' (http://raphaeljs.com/reference.html#Element.data) which allows custom key/value pairs to be set for each item on the paper. Although it doesn't accept an array of items, it's possible to call this method multiple times so each attribute can be added this way. An example can be seen here: http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element.data#pagetop

Answer 2

I think that the best way to do It would be with the Raphael's getById(). You can asign an internal ID. Here I've answered a question in wich you have an example of how to do It.

adding ID's to raphael objects

Bye!