Search code examples
javascriptattributessvgraphaelvml

Raphael.js attributes and VML

With Raphael I would like to create a rectangle with an Id attribute like the example below.

<rect id="aRect" x="10" y="10" width="50" height="50" r="2" rx="2" ry="2"/>

To create the rectangle I can use code like this

var elem = _paper.rect(10, 10, 50, 50, 2);

and set the Id using code like this

elem[0].setAttributeNS(null, 'id', 'aRect');

or with code like this

elem.node.id = 'aRect';

now raphael falls back to vml on older IE's right how can I add an id attribute that also caters for the vml case or does this code work for that too?

Solution

  • After reading on MS page here I implemented this solution for setting the Id.

    function setId(el, id){
    if(el === null || typeof el !== 'object') return;
    if(Raphael.type === 'SVG') {
        el[0].setAttributeNS(null, 'id', id);
    }
    else if(Raphael.type === 'VML') {
        el[0].id = id;
    }
}