//Playground compatible: paper.ellipse(120, 250, 80, 95).attr({stroke: "none", fill: "r(.5,.9)#808-#0FF", opacity: 0});
paper.ellipse(320, 250, 80, 95).attr({stroke: "none", fill: "r(.5,.1)#808-#0FF", opacity: 0});
//Note that although ie and ff are similar showing inverted gradient //Chrome shows a central concentration of "dots" and there is no difference in appearance //for the two lines of code above..

I'm using raphaeljs with batik to render graphs as PDF documents. In order to do this, the following patch needs to be added to raphaeljs 1.2.5:

* 1550,1555 ** --- 1550,1557 ----

          var cnvs = paper.canvas;
          paper.width = width || 512;
          paper.height = height || 342;

•       cnvs[setAttribute]("xmlns", "http://www.w3.org/2000/svg");
  

•       cnvs[setAttribute]("version", "1.1");
        cnvs[setAttribute]("width", paper.width);
        cnvs[setAttribute]("height", paper.height);
        if (container == 1) {
  

In playground:

paper.path("M100 50a20 20 0 1 0 20 20");
paper.path("M50 50a20 20 0 1 0 20 20").scale(-1, 1).attr('stroke', '#f00');
paper.path("M100 100a20 20 0 1 0 20 20").scale(1, -1).attr('stroke', '#0f0');
paper.path("M50 100a20 20 0 1 0 20 20").scale(-1, -1).attr('stroke', '#00f');

Fine in SVG mode, breaks in VML.

Fix:

--- raphael.js- 2009-12-01 17:21:30.000000000 +0000
+++ raphael.js  2009-12-01 16:55:00.000000000 +0000
@@ -2490,7 +2490,7 @@
                         } else {
                             skip = false;
                         }
-                        if (R.svg && P0 == "A") {
+                        if (P0 == "A") {
                             p[path[i][length] - 2] *= kx;
                             p[path[i][length] - 1] *= ky;
                             p[1] *= dirx * kx;

I'd included this in the original patch, but maybe I just explained it poorly. Despite VML not handling arcs, for correct translation to cubic paths these values must be processed either like this, or with a VML specific catch and not just ignored (as is the case currently).

Think about it, if not svg but is an arc, the path is processed by the default handler. Such processing is clearly incorrect regardless of VML's capabilities.

var c = paper.circle(200,200,100).attr({fill:"red"});
var bBox = c.getBBox()
c.paper.rect(bBox.x,bBox.y,bBox.width,bBox.height);

var c = paper.path("M140,240 L140,200 110,200 C110,110 190,110 190,200 L160,200 160,240");
var bBox = c.getBBox()
c.paper.rect(bBox.x,bBox.y,bBox.width,bBox.height);

c1=paper.circle(320, 100, 60).attr({fill: "red"});
c2=paper.circle(320, 300, 60).attr({fill: "rhsb(0.47780834201297895, 1, .25)-hsb(0.47780834201297895, 1, .25)"});

alert(c1.attr("fill"));
alert(c2.attr("fill"));
"c2" yields "none"

There seems to be path issues in the latest version,

1. The integration test HTML fails the path tests (in all these browsers IE 7, Chrome 3, Firefox 3, Safari 4)
   
2. I had issues with bounding box calculation for a cubic curve
   
3. Rounded corners does not work properly in IE
   
4. Basic path methods fail such as the example below

c = paper.path({"fill": "red", "fill-opacity": 0.2}, "M 200 200 Q 150 300 100 300");
error as shown in FireFox and IE
Error: pathArray[0] is undefined
Source File: raphael.js
Line: 445

I do not have any of these issues when i move back to 0.8 version of Raphael. Everything works as expected

Here is some test code, which I have been trying at http://raphaeljs.com/playground.html

var target = paper.rect(10, 10, 100, 100, 10);
target.attr({y: 20, width: 200, height: 200, "stroke-dasharray": "- "});
target.remove();

If you take any of the attribute updates out, or get rid of the radius, the rectangle is removed uccessfully, but in this case an error is thrown. (Only in IE).

There's a possible fix for it in my fork of the code on github:
http://github.com/jamesots/raphael/commit/70af89034027010af0a219dfa3b7fc8b5b2b77c8

A rounded rectangle in IE7 requires re-registering of shape mouse events after dimension changes

var c = paper.rect(200, 200, 200, 100, 15).attr("fill", "blue");
c.mousedown(getMouseDown()); //will not fire
c.mouseup(getMouseUp()); //will not fire
c.attr({"width":100, "height":50}); //due to this

the same works if it is a normal rectangle or the rounded corner is set to 0

A rounded rectangle in IE7 requires re-registering of shape mouse events after dimension changes

To make it work the events have to be re-registered
var c = paper.rect(200, 200, 200, 100, 15).attr("fill", "blue");
c.mousedown(getMouseDown()); //will not fire
c.mouseup(getMouseUp()); //will not fire
c.attr({"width":100, "height":50}); //due to this
c.mousedown(getMouseDown()); //will fire now
c.mouseup(getMouseUp()); //will fire now

This line (1137 [v1.2.3]) creates an error when xy[i] is equal to -1.

xy = [-1, -1];
translate.call(o, (+xy[0] + 1 || 2) - 1, (+xy[1] + 1 || 2) - 1);

Step through:

translate.call(o, (-1 + 1 || 2) - 1, (-1 + 1 || 2) - 1);
translate.call(o, (0 || 2) - 1, (0 || 2) - 1);
translate.call(o, (2) - 1, (2) - 1);
translate.call(o, 1, 1);

var c = paper.circle(10, 10, 10);
c.hide();
alert(c.attr("hide"));//returns "undefined"

Only text and path

var canvas = Raphael(0, 0, 500, 500);
var p = canvas.path();
var t = canvas.text(100, 200, "aaaaaaaaaaaaa\nbbbbbbbbb");
redraw = function() {
p.attr("path", "M0,0 L100,200");
t.attr("x", 100).attr("y", 200);
}

resize = function() {
canvas.setSize(800, 800);
}

setTimeout(redraw, 100);
setTimeout(resize, 2000);
setTimeout(redraw, 2500);

If the text contains multiple newlines, or ends with newline, it doesn't show up at all. Tested with google chrome 4.0.245.0 on macosx. The following code illustrates the problem, only the 3rd text is working properly.

var r = Raphael("holder", 800, 250);
var txt = {font: "12px Fontin-Sans, Arial", fill: "#000"};
var l = r.text(100, 50, "1\n\n2").attr(txt).show();
var l = r.text(150, 50, "1\n2\n").attr(txt).show();
var l = r.text(200, 50, "1\n2\n3").attr(txt).show();

Vertical positioning of elements created with raphael.print is not correct, as illustrated by
http://dl.getdropbox.com/u/223827/raphael/raphaelprinttest.html
where each colored element should be somewhere on the correspondingly colored line.

The culprit seems to be the line:

out.scale(scale, scale, 0, y).translate(x, (size || 16) / 2);

The "obvious" fix:

out.scale(scale, scale, 0, 0).translate(x, y);

seems to produce a behaviour that is at least consistent, if not correct:
http://dl.getdropbox.com/u/223827/raphael/raphaelpatchedprinttest.html

There must however be some reason why the more "obvious" line is not what was written. What is the correct desired behaviour?

var canvas = Raphael(0, 0, 500, 500);
var rect = canvas.rect(0, 0, 0, 0);
redraw = function() {
rect.attr("x", 100).attr("y", 100).attr("width", 150).attr("height", 150);
}

resize = function() {
canvas.setSize(800, 800);
}

setTimeout(redraw, 100);
setTimeout(resize, 2000);
setTimeout(redraw, 2500);

This fixes negative scaling about the point (cx, cy). Tested in FF3 and IE8/7.

Changes:

-                kx = x / this._.sx,
-                ky = y / this._.sy;
+                kx = x,
+                ky = y;

Wasn't entirely sure why it was necessary to have the previous scale influence the current one, and it was causing problems (I can understand merging scales, but not when they might have completely different cx and cy values) so it got stripped.
 

-                ncx = cx + (rcx - cx) * dirx * kx,
-                ncy = cy + (rcy - cy) * diry * ky;
+                ncx = cx + (rcx - cx) * kx,
+                ncy = cy + (rcy - cy) * ky;

When x < 0 both kx and dirx would be negative and cancel out (breaking negative scaling). Since dirx is always 1 or -1 (and thus basically a flip bit) it got dropped.
 

-                        rx: a.rx * kx,
-                        ry: a.ry * ky,
-                        r: a.r * mmin(kx, ky),
+                        rx: a.rx * dirx * kx,
+                        ry: a.ry * diry * ky,
+                        r: a.r * mmin(dirx * kx, diry * ky),

As I explained eariler, kx * dirx === Math.abs(kx) and as rx should always be positive (why would you have a negative radius?), this prevents weird results.
 

-                        if (R.svg && p[0].toUpperCase() == "A") {
+                        if (p[0].toUpperCase() == "A") {

Not sure why this check was here, as the special handling it contains is necessary in both SVG and VML. I assume it's from before Raphael started using SVG paths. Dropped.
 

-                            p[1] *= kx;
-                            p[2] *= ky;
+                            p[1] *= dirx * kx;
+                            p[2] *= diry * ky;

Negative radius solution again, this time for arcs.
 

+                        } else if (p[0].toUpperCase() == "H") {
+                            for (var j = 1, jj = p[length]; j < jj; j++) {
+                                p[j] *= kx;
+                            }

This stops H paths being scaled by ky when using the abnormal form H5 10 15 which is legal, but pointless (same as H30).
 

+                        } else if (p[0].toUpperCase() == "V") {
+                            for (var j = 1, jj = p[length]; j < jj; j++) {
+                                p[j] *= ky;
+                            }

This stops V paths being scaled by kx, previously V5 would have become V(5*kx).

Patch:

--- raphael.js?raw=true 2009-10-28 09:48:50.000000000 +0000
+++ raphael.js  2009-10-30 16:03:56.000000000 +0000
@@ -2316,15 +2316,15 @@ window.Raphael = (function () {
             var bb = this.getBBox(),
                 rcx = bb.x + bb.width / 2,
                 rcy = bb.y + bb.height / 2,
-                kx = x / this._.sx,
-                ky = y / this._.sy;
+                kx = x,
+                ky = y;
             cx = (+cx || cx == 0) ? cx : rcx;
             cy = (+cy || cy == 0) ? cy : rcy;
             var dirx = ~~(x / Math.abs(x)),
                 diry = ~~(y / Math.abs(y)),
                 s = this.node.style,
-                ncx = cx + (rcx - cx) * dirx * kx,
-                ncy = cy + (rcy - cy) * diry * ky;
+                ncx = cx + (rcx - cx) * kx,
+                ncy = cy + (rcy - cy) * ky;
             switch (this.type) {
                 case "rect":
                 case "image":
@@ -2344,9 +2344,9 @@ window.Raphael = (function () {
                 case "circle":
                 case "ellipse":
                     this.attr({
-                        rx: a.rx * kx,
-                        ry: a.ry * ky,
-                        r: a.r * mmin(kx, ky),
+                        rx: a.rx * dirx * kx,
+                        ry: a.ry * diry * ky,
+                        r: a.r * mmin(dirx * kx, diry * ky),
                         cx: ncx,
                         cy: ncy
                     });
@@ -2361,12 +2361,20 @@ window.Raphael = (function () {
                         } else {
                             skip = false;
                         }
-                        if (R.svg && p[0].toUpperCase() == "A") {
+                        if (p[0].toUpperCase() == "A") {
                             p[path[i][length] - 2] *= kx;
                             p[path[i][length] - 1] *= ky;
-                            p[1] *= kx;
-                            p[2] *= ky;
+                            p[1] *= dirx * kx;
+                            p[2] *= diry * ky;
                             p[5] = +(dirx + diry ? !!+p[5] : !+p[5]);
+                        } else if (p[0].toUpperCase() == "H") {
+                            for (var j = 1, jj = p[length]; j < jj; j++) {
+                                p[j] *= kx;
+                            }
+                        } else if (p[0].toUpperCase() == "V") {
+                            for (var j = 1, jj = p[length]; j < jj; j++) {
+                                p[j] *= ky;
+                            }
                         } else {
                             for (var j = 1, jj = p[length]; j < jj; j++) {
                                 p[j] *= (j % 2) ? kx : ky;

Demo 1:

var lineA = raph.path('M20 20H40').scale(1, 2);
var lineB = raph.path('M20 20V40').scale(1, 2);

Expected:
lineA remains unchanged. lineB doubles in vertical length.

Actual:
lineA remains unchanged. lineB remains unchanged.

Demo 2:

var lineA = raph.path('M20 20H40').scale(2, 1);
var lineB = raph.path('M20 20V40').scale(2, 1);

Expected:
lineA doubles in horizontal length. lineB remains unchanged.

Actual:
lineA doubles in horizontal length. lineB doubles in vertical length.

I've not had time to investiagte in detail, but if I had to guess I'd
say that there's no special case checks for H and V in the scale
method, and both get incorrectly treated as the first argument (x
coord) of a pair. i.e. the 10 in L10,20.

"Unexpected value -Infinity parsing y attribute."

window.onload = function() {
var paper = Raphael("holder", 320, 200); var t = paper.text(50, 50, "Print this!"); };

Circle and rect work fine.

the text still gets rendered just above the top of the canvas.

Something i was working on is broken, and none of the "Paths" tests in test/integration.html are showing at all. The error message in Safari is "TypeError: Result of expression 'pathArray[0]' [undefined] is not an object". The error message in Firefox is "pathArray[0] is undefined". Both point to line 425 of raphael.js.

I'm using mac versions of Safari v4.0.2 and Firefox 3.5.3, with a freshly cloned copy of Raphaël.

try this code (with Raphael 1.1) in IE 8 (in Firefox, Google Chrome it works fine):

var r = Raphael("world", 640, 380);
var o = r.rect(200, 200, 50, 70, 5);
o.attr({gradient: "90-#000-yellow:1-#fff"});
o.scale(2.0);
o.attr("r", 1);

I've just noticed when using setSize to change the size of the Raphael canvas in IE8 the contents of the drawing get stretched. This happens for both increasing and decreasing the size and in both Raphael 1 and 1.1. FF3.5 and Chrome both behave as you'd expect. I haven't been able to test IE7 or earlier. Any following objects are correctly drawn. My current solution is to remove and then redraw the content

paper.text(320, 240, "Hello World").animate({x: 100, y: 100},600)

It goes from the initial position, off the screen, and then after the duration is over, pops back up at the final location

(it works fine in Firefox 3). code:

var r = Raphael("world", 640, 380);
r.text(100, 100, "foo\n");

var txt = Raphael(0, 0, 900, 900).text(20, 50, "Test text");
txt.node.onmousedown = function() {alert('onmousedown');}

Doesn't work in IE.

Hi, and thanks very much for this fantastic job.

Just wanted to report that the demos don't work when viewing them with Safari and page zoom level is other than 0.

I'm using Safari 4.0.3 (5531.9) on Mac OS X 10.5.8
Would like to have the knowledge to fix it myself, but I don't. By now :-)

Thanks again.

In Raphael 1.0RC2 the drawing of sectors fail, see:
http://ludo.orbin.se/alt-min.html

FF 3.0.14 says: "Z[0] is undefined". This problem also exists in IE7, and probably other browsers.

I try to rotate the dice with every throw, but the with Raphael 0.8.6 the rotation is lost on translate http://ludo.orbin.se/alt.html, and with Raphael 1.0RC2 it doesn't translate in the right direction (more serious problem) http://ludo.orbin.se/alt-min.html, however, rotation is not lost.

Hi,
I get error in IE 8 with this code: (using Raphael 1.0 RC1.3)

var r = Raphael("world", 640, 480);
var p = ["M", 100, 100, "S", 200, 100, 250, 120];
r.path(p.join(" "));

in Google Chrome 4, Opera 10.0 and Firefox 3 everything works fine.
There seems to be problem with pathDimensions which returns dim object
with 'height' and 'y' properties equaled to NaN.

Regards,

David

line 1683 of http://github.com/DmitryBaranovskiy/raphael/blob/9f6cf4979a0477d4c0eb6a4b407364f1fb6af5ab/raphael.js should be:

                fill.colors && (fill.colors.value = clrs.join(","));

sorry can't provide more details since i'm at work, but the radial gradients on the ball demo partly fail in Chrome nightly and FF nightly builds, not sure if it's a Raphael or browser bugs. thx.

In version 1.0RC5, calling the paper.text() function where the third argument is actually a number rather than a string throws an "object does not support this property or method" error. This only happens in IE though...

If I inititalize Raphael with
var paper = Raphael($('container'), 200, 200);
it doesn't work because,
R.is(arguments[0], "object") in getContainer returns false

Object.prototype.toString.call(o) == [object HTMLDivElement]

Version: Raphael 1.0 RC1.4

When i'm trying to create smooth curve with something like curve.attr("path", "M50 50 T100 100 T50 200" the curve disappears in IE.

rectangle should (in theory) disappear, but it doesn't

             diff --git a/inc/raphael.js b/inc/raphael.js
             index 050a70e..9100192 100644
             --- a/inc/raphael.js
             +++ b/inc/raphael.js
             @@ -1619,7 +1619,8 @@ window.Raphael = (function () {
                              a["font-size"] && (s.fontSize = a["font-size"]);
                              a["font-weight"] && (s.fontWeight = a["font-weight"]);
                              a["font-style"] && (s.fontStyle = a["font-style"]);
             -                paper.span.innerHTML = res.node.string.replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br>");
             +                if(res.node.string)
             +                  paper.span.innerHTML = res.node.string.replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br>");
                              res.W = a.w = paper.span.offsetWidth;
                              res.H = a.h = paper.span.offsetHeight;
                              res.X = a.x;
             @@ -2120,8 +2121,8 @@ window.Raphael = (function () {
                          }
                          var c = paper.canvas = doc.createElement("div"),
                              cs = c.style;
             -            width = parseFloat(width) || "512px";
             -            height = parseFloat(height) || "342px";
             +            width = parseFloat(width) || "512";
             +            height = parseFloat(height) || "342";
                          paper.width = width;
                          paper.height = height;
                          paper.coordsize = width + " " + height;

if res.node.string is not defined, IE will throw an error when calling .replace on an undefined value.
height and width need to be specified without the "px" because it will be added to it later.

moritz

Just test following code in Google Chrome (mine is 3.0.195.21):

 <script type="text/javascript" src="scripts/raphael.js"></script>
 <script type="text/javascript" src="scripts/jquery.js"></script>
 <span id="container">
 Hello!!
 </span>
 <script type="text/javascript">
 $("#container").each( function() {
 var p = Raphael($(this).context, 10, 10)
 p.circle(5, 5, 5).attr({fill: "#F00"})
 })
 </script>

Chrome throws error:

 raphael.js:1365
 Uncaught TypeError: Cannot read property 'container' of undefined

1. setSize() breaks vml canvas.
   
2. Rectangles with rounded corners are not available with vml. Maybe use v:roundrect instead of v:rect?
   
3. Radial gradients is not implemented, but both svg and vml have this feature

Напишу по-русски подробнее:
1) Достаточно сравнить результат двух скриптов в IE (проверял в IE7)
var canvas = Raphael(someDOMElement, 1000, 1000);
canvas.setSize(500, 500)
var circle = canvas.rect(10, 10, 200, 200);
И то же самое без setSize.
Пока удалось решить проблему, закомментировав все содержимое setSize() в vml секции, кроме строчки cs.clip = ...., как ни странно работает и после этого.
2) attr("rx", something) и attr("ry", something) не имеют никакого эффекта в IE
3) Не нашел стандартного способа задать радиальный градиент для объектов

The code for R.format near the bottom of raphael.js for 1.0 RC1.2 has the following line

        return args[++i] || "";

which will return 0 if args[++i] is 0.

While the workaround is to pass "0", changing the line as follows will make it work as expected:

        //return args[++i] || "";
        var arg = args[++i];
        return (arg == null) ? "" : arg;

In IE, Raphael applies rotation before any translation. Whereas in Firefox, Raphael applies translation first and then rotation. This creates a noticeable difference in platform behavior, and breaks Raphael's otherwise good cross-platform support.

For a longer discussion and example source-code, please see the forum thread http://groups.google.com/group/raphaeljs/browse_thread/thread/2a90d182b453402f/76d7b370918ea411?lnk=gst

Seems that the first gradient to be defined overwrites subsequent gradients: This worked correctly in 0.8.6, but not 1.0 RC1

Tested in Firefox 3.5, 3.0 and Safari 4 Mac & Windows
Examples:

Using 0.8.6
http://solsyslabs.com/raphaelbug/version_86.html

Using 1.0 RC1
http://solsyslabs.com/raphaelbug/version_1RC1.html

Code in both files is identical, aside from the JS include and the page title.

Please let me know if you need additional examples or if you have any other questions.

Something like this does not work:

r2.attr({rx:15, ry:15, 
    gradient: {
        type: 'linear',
        vector: [0,0,0,1],
        dots: [
            { offset: '0.0', color: '#fff', opacity:'0.5' },
            { offset: '0.33', color: '#fff', opacity:'0.25'},
            { offset: '0.34', color: '#fff', opacity:'0'}
       ]}});

In the generated svg there's no stop-opacity properties.
If you look lines 854-855 of raphael.js,

            if (gradient.dots[i].offset) {
                isopacity = false;

it explains why it is ignored : if there's an offset defined and != 0.
Is it expected ?
thanks

When using the getBBox() method on any object created with paper.text() with more than one line of text, I get all manner of different results.
IE gives what I'd expect; Firefox seems to always take the x parameter to be zero, and thus the width is offset from that; Safari and chrome seem to give a value for width something of the order of 2^32...
Any ideas? It works fine for text strings without any newlines in it, but I'd prefer not to have to create a new text object for every line.
Cheers

We've had serious issues with raphael in IE7 under both XP and Vista. Charts created with graphael only display skeletons, mouseovers leave ghost outlines and the div isn't resized properly (see http://img.skitch.com/20090828-dpeq2u6be68r5141yrjt9jr6ig.png)

Fixed in 1.0 branch

Steps:

http://raphaeljs.com/playground.html

paper.rect(100,100,100,100).rotate(42).attr("fill","blue")

Expected:

Rectangle should be tilted at 42deg.

Result:

Rectangle is not rotated

Affects:

I've tried Chromium nightly and Firefox 3.0.

This works on FF and IE
var rect_1250436797635 = paper.rect(400,100,100,100,0);
rect_1250436797635.rotate(218.13589547328468);

Problems on FF with Cufon js fonts
myFontRef=paper.getFont('whoa');
myFont=paper.print(70, 150, 'Raphael with Cufon', myFontRef, 60);

myFont[0].attr( {rotation: 218.13589547328468} );//Works in 0.86 for FF and IE
myFont[1].rotate(235.83932546062303);//Works in 0.86 for IE but not FF

shape = this.draw.text(x, y, this.prop['text']).attr('font-size',0)
shape.attr("text")
//null shape.attr("text",this.prop.text);
shape.attr("text")
//text

When I have a rotated shape, and I use .translate to move it, then the rotation is reset to 0.

var shape = this.draw.ellipse(x, y, w, w).attr({

"stroke-width": 1,
"stroke": "green",
"fill": "white"

}).mouseover(function(){

this.attr("fill", "red")

})

When mouseover executes then the rotation is reset.

Using shape.attr("src") on an image returns nothing.

I don't know if this is better classified as a feature request or a bug. Using shape.attr("rotation") does nothing.

None of the text renders in Firefox 3.0 with Raphael 0.8.5 but it worked with 0.8.2. The text related demos don't work.

D
other users are reporting this error:

This code worked on 0.8.2
paper.circle(100, 170, 175).attr({

    gradient: {
        type: "linear",
        dots: [{opacity: 0.5, color: "#900"}, {color: "#900", opacity:

0.0}], vector: [0, 0, 0, "100%"]},

    stroke: "none"
});

Specifically:
Error:
Line: 1778
Error: The Object do not support this attribute or method

Which is this line in Raphael.js --> fill =
o.getElementsByTagName("fill");
part of var addGradientFill = function (o, gradient)

Issue is calling getBBox even when we are using a text element, you'll notice my fix...which does work, tested in IE/FireFox/Opera

Element.prototype.getBBox = function () {
    var hide = false;
    if (!(this.node.style.display == "block")) {
        this.show();
        hide = true;
    }
    var bbox = {};
    if (this.type == "text") {
        bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0};
        for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) {
            var bb = this.node.getExtentOfChar(i);
            (bb.y < bbox.y) && (bbox.y = bb.y);
            (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y);
        }
    } else {
        bbox = this.node.getBBox();
    }
    if (hide) {this.hide();}
    return bbox;
};

At http://raphaeljs.com/animation.html
the reverse transition for the 2nd-down animation on the right side does not move all the way back to its original position. Repeatedly clicking on it will show the animation moving further and further to the right as it moves back and forth.

The forward animation of it works just fine. I suspect the bug to be in the demo code, not in Raphael itself.

All the "#" anchor links are broken; they point to the main page instead of the anchors on reference.html. Probably because of
<base href="http://raphaeljs.com/"> at the top of the HTML on the website. I notice that's not the case for the version of reference.html checked into GitHub tho.

Hi,

I wanted to make multiple rotations on element like that:
element.rotate(-20 , 0 , 0).rotate(90, 10, 10)

To do that, I suggest the following code:

Replace at line 1126

        if (this._.rt.deg) {
            this.transformations[0] = ("rotate(" + this._.rt.deg + " " + cx + " " + cy + ")");
        } else {
            this.transformations[0] = "";
        }

By

        if (!this.transformations[0])
          this.transformations[0] = "";
        if (this._.rt.deg)
            this.transformations[0] += ("rotate(" + this._.rt.deg + " " + cx + " " + cy + ")");

Regards,

Cedric

Enter the following code into http://raphaeljs.com/playground.html

paper.text(200, 50, "Testing 1,2,3").attr({"font-family": "serif", "font-size": "20pt"});

Note that on FireFox, the text has serifs, while on IE it does not. Also tried "Helvetica", "Times New Roman", "Comic Sans", "Verdana". Basically font-family is not applied in IE at all.

On Firefox (v3, on Linux), setting a box's dasharray using

box.attr("stroke-dasharray", "- ");

works fine. However, trying to reset it to be a solid line is impossible.

box.attr("stroke-dasharray", "");

results in the code in the if (value) block for the SVG-specific addDashes to skip once the value lookup in dasharray is determined to be undefined. I have not tested to see if this is an issue for VML as well; but it appears at first glance to not be (it defaults dashstyle to "" when the dasharray lookup fails). My suggestion to fix this is to either:
1) make addDashes set a value for stroke-dasharray even if the dasharray lookup is undefined; or
2) add a specific entry in support of solid lines to the dasharray for both VML and addDashes, and make the VML not have a default value in its current form.

In the meantime, the only workaround (without modifying the library code) is to replace the created SVG object with one without having stroke-dasharray set (meaning- create a new box, set appropriate attributes, destroy the old one).

Using the following test code at http://raphaeljs.com/playground.html

var t0 = new Date();
for (var i = 0; i < 500; i ++) {
  paper.rect(Math.random()*400, Math.random()*400, 10, 10).attr({stroke: "#f88", fill: "#f88"});
}
var t1 = new Date();
paper.text(100, 100, "Time: "+(t1-t0)+" ms");

Here are my results over several trials:

In other tests I have seen some improvement by creating the canvas in a new element that isn't in the DOM tree, and then moving the canvas into the DOM tree after the objects are created, but there are still big differences between the speeds.

Of course I'm sure it's impossible to get all browsers to perform identically, but I'm submitting this issue because I believe that the very high numbers for IE may be due to a bug in Raphael's VML processing. More research will be necessary to confirm this.

Hi Dmitry,

Does Raphael run well in Adobe AIR? If not, is this something you are or will work on soon?

Thanks!

Running Graffle sample app in Adobe AIR generates the error "TypeError: Value undefined does not allow function calls" on line 2137 of the UN-minified Raphael 0.8.2, AND "ReferenceError: Can't find variable: Raphael".

Dmitry,
I hope your not phased by the Google initiative on SVG...

Any way, the below did not have an affect on "font-size" when run in FF 3.0.11 but works as expected in IE

var text1 = paper.text(200,100,'Version 2',60);
text1.attr({fill:'black', 'font-size':60, rotation:340, 'stroke-width':2, stroke:'red', x:200, y:100 });

var text2 = paper.text(200,150,'Version 2',60);
text2.attr({fill:'black', 'font-size':60, 'stroke-width':2, stroke:'red', x:200, y:100 });

When dragging objects in Firefox 3.5, the first attempt at dragging is successful. Subsequent attempts at dragging the same object fail however: rather than dragging an object, a "ghosted" square is pulled away from the object. When the mouse button is released, the object then snaps to the position of the mouse cursor and will be dragged around. The mouse button must then be clicked again to release the object.

This occurs in all Raphael examples hosted on the Raphael site that involve any sort of dragging. I noticed this in Firefox 3.5 on Mac OSX 10.5.7. Cannot reproduce the problem in Safari 4.

Wow Rap 0.8.2
Now your talking, so it occurs to me this might be ok, however I just tested in playground and if thats looking at the latest version. It's not..

Run this in playground in IE and FF
paper.path({"fill": Raphael.getColor(), "stroke": "none"}).moveTo(150,200).arcTo(50, 50, 0, 0, 250, 200).andClose();
paper.path({"fill": Raphael.getColor(), "stroke": "none"}).moveTo(150,200).arcTo(50, 50, 0, 0, 250, 200).andClose().attr("rotation",180);

I'm finding it difficult to get consistent results from Raphael paths in FF and IE. Consider the following test script:

<script type="text/javascript" src="raphael.js"></script>
<body>
<div id="x" style="width: 200px; height: 200px">
</div>
<script type="text/javascript">
  var r = Raphael("x", 60, 60);
  r.rect(-10, -10, 80, 80).attr("fill", "#ddd");
  r.path({"stroke-width": 1}, "M 1 1 L 50 1");
  r.path({"stroke-width": 1}, "M 1.5 5.5 L 50.5 5.5");
  r.path({"stroke-width": 2}, "M 1 10 L 50 10");
  r.path({"stroke-width": 2}, "M 1.5 15.5 L 50.5 15.5");
  r.path({"stroke-width": 3}, "M 1 20 L 50 20");
  r.path({"stroke-width": 3}, "M 1.5 25.5 L 50.5 25.5");
</script>

The semantics of lines are not specified in the Raphael documentation, and they appear to be different for SVG and VML. I would expect Raphael to smooth out these differences. For instance, is a line centered on the pixel boundaries (i.e. on the top-left corner of the pixel), or is it centered in the center of the pixel. Every line looks different between FF and IE:

r.path({"stroke-width": 1}, "M 1 1 L 50 1");

• In FF: two half-pixel lines from 1,0 and 1,1 to 49,0 and 49,1
• In IE: a full pixel line from 3,2 to 50,2, with two partial pixels at 2,2 and 51,2

r.path({"stroke-width": 1}, "M 1.5 5.5 L 50.5 5.5");

• In FF: a full pixel line from 2,5 to 49,5, with two partial pixels at 1,5 and 50,5
• In IE: a full pixel line from 4,7 to 51,7, with two partial pixels at 3,7 and 52,7

r.path({"stroke-width": 2}, "M 1 10 L 50 10");

• In FF: two full-pixel lines from 1,9 and 1,10 to 49,9 and 49,10
• In IE: a full pixel from 3,11 to 50,11, with partial pixels all around it

...and so on. Try running that code above in different browsers and blow up the screenshots to see what I mean.

There appear to be a few problems:

1. In IE, the Raphael object is 61x61 (not 60x60) and all the positions are offset by +1,+1 (could this be padding in the top-level VML element?).
   
2. In IE, all pixel positions are rounded to the nearest integer.
   
3. In both IE and FF, the lines appear to be centered around the top-center edge of the pixel.

So if you want a solid full-pixel line in FF, you need to add 0.5 to the y coordinate (after accounting for half the stroke width), and if you want the same in IE you just can't have it. All these issues apply as well to the rect function, I did not test circle/ellipse/text/image.

I believe this is a bug in Raphael, that it doesn't present a consistent API for putting lines where you want them.

Hi,

Thanks for cool library.

I wanted to do something like paper.text(0, 0, "foo").scale(1, 0.5); to scale the height of font to half but I found out Raphael doesn't do anything for text.scale unless either dirx or diry is -1. So I hacked it a little bit to make it do what I wanted it to do.

The patch is against Raphael v 0.8. It worked for me on Firefox 3.5RC3 and Safari 4.0. I don't know what I should do when transform is false so that part of the code is not in this patch.

--- raphael.js~ 2009-06-27 19:53:37.000000000 +0900
+++ raphael.js  2009-06-28 10:43:15.000000000 +0900
@@ -2438,7 +2438,7 @@
         this.attr({path: path.join(" ")});
         break;
     }
-            if (this.type in {text: 1, image:1} && (dirx != 1 || diry != 1)) {
+            if (this.type == "image" && (dirx != 1 || diry != 1)) {
         if (this.transformations) {
         this.transformations[2] = "scale(".concat(dirx, ",", diry, ")");
         this.node.setAttribute("transform", this.transformations.join(" "));
@@ -2453,7 +2453,18 @@
             ", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')");
         s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
         }
-            } else {
+            } else if (this.type == "text") {
+       this.transformations[2] = "scale(".concat(x, ",",
+                             y, ")");
+                this.node.setAttribute("transform", this.transformations.join(" "));
+       dx = a.x / x;
+       dy = a.y / y;
+       dx = (dirx == -1) ? dx - (neww || 0) : dx;
+       dy = (diry == -1) ? dy - (neww || 0) : dy;
+                this.attr({x: dx, y: dy});
+                a.fx = dirx - 1;
+                a.fy = diry - 1;
+       } else {
         if (this.transformations) {
         this.transformations[2] = "";
         this.node.setAttribute("transform", this.transformations.join(" "));

D
//Works in ie AND ff NO PROBLEM var c = paper.circle(150,350,60);
c.attr({stroke:'none',gradient: "90-black-red"})

//Works in ie but black in ff var c = paper.circle(150,350,60);
c.attr({stroke:'none',gradient: "90-#fff[-red[:50%]]-#000"});

I'm not sure if you are fully supporting this syntax but here goes..
With ie you get a verticle gradient and with ff it's horizontal..

var c = paper.circle(150,350,60);
c.attr({stroke:'none', gradient:{ type:"linear", dots:[{ offset:"10%", color:"#f5f5f5" },{ offset:"40%",
color:"#e5e5e5" },{offset:"90%", color:"#d5d5d5" }] }});

Also if you replace "linear" with "radial" you get a partial gradient but the centre is blank in ie (works in ff)

Firefox 3.0.11
i am loading both prototype and jquery libraries prior to loading raphael 0.8. jquery is in noconflict mode. i don't know if any of that matters, but providing it just in case.

i'm using the uncompressed raw file for ease of hunting down issues.

when i load up 0.8 in FF i get this error:

Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://local.www.sqibl.com/js/raphael.0.8.js :: anonymous :: line 1135" data: no]
Source File: http://local.www.sqibl.com/js/raphael.0.8.js
Line: 1135

when i click through, the offending line it takes me to is actually line 1136 which is:
var bbox = this.node.getBBox();

I am currently studying all these attributes on all the primitives, so this is similar to the rounded corners for rectangles.
PLAYGROUND CODE BELOW
ellipse = paper.ellipse(300,150,30,40);
ellipse.animate({'rx': 50, 'ry': 70, 'x': 400, 'y': 350},2000);
circle = paper.circle(100, 200, 45);
circle.animate({'r': 45, 'cx': 200, 'cy': 300},2000);

I am currently studying all these attributes on all the primitives, so this is similar to the rounded corners for rectangles.
PLAYGROUND CODE BELOW
ellipse = paper.ellipse(300,150,30,40);
ellipse.animate({'rx': 50, 'ry': 70, 'x': 400, 'y': 350},2000);
circle = paper.circle(100, 200, 45);
circle.animate({'r': 45, 'cx': 200, 'cy': 300},2000);

Using the 0.8 branch, creating a rectangle with height=0 causes an "Out of memory" error in IE.

canvas.rect(0, 0, 10, 0);

The seems to be the result of infinite recursion in the function

Element.prototype.setBox

v8Text=paper.text(200, 200, 'Version 8.0?').attr('font-size',70).attr('fill','black').attr('stroke','red').attr('stroke-width',2);
v8Text.node.onclick = function () { alert('hi - No message from ie/vml'); };