Question

I have been working quite a bit with Raphael SVG/VML library, the website states it supports Firefox 3.0+.

I have however encountered a problem using the latest version of Raphael and jQuery 1.8.3.

I am able to create a paper var paper = Raphael('divID',500,500); and create shapes on this paper, for example var rect1 = paper.rect(0,0,100,100);

The problem occurs when I then try and get a bounding box for this rect. In the console I get a this.join is not a function

I also get the same problem while creating paths.

From what I can see it seems to be a problem with the getBBox function or the pathToString function. Has anyone encountered this problem and does anyone know what I could change to fix the problem?

EDIT: The reason I ask specifically about 3.0.12 is my customer has no choice but to run on that browser, unfortunately.

Answer 1

The problem is inside clone function inside Raphael library. This function doesn’t clone functions properly in old version of Firefox. One of the solutions is to modify code to return functions without clone them (just like it’s doing with simple JavaScript types)

So, your final code for Raphael’s clone function will look like this:

function clone(obj) {
    if (Object(obj) !== obj || typeof obj === 'function') {
        return obj;
    }
    var res = new obj.constructor;
    for (var key in obj) if (obj[has](key)) {
        res[key] = clone(obj[key]);
    }
    return res;
}

I hope this will not broke anything.