Question

In Raphael (a JavaScript library for working with SVG), you can apply transformations to an element, such as rotation, translation, and scaling.

So let’s say I want to make a line that is 8 pixels wide. I can do something like this:

paper = new Raphael(0, 0, 200, 200);
paper.path("M 0,0 l 200,200").attr({"stroke-width": "8px"});

But if I want to scale that line somehow, I lose my 8 pixel width and it falls back to the standard 1 pixel width.

paper.path("M 0,0 l 200,200").attr({"stroke-width": "8px"}).transform("s -1,1");

No matter what I do, I can’t seem to make any scaled line that maintains its stroke width. Other transformations work fine. It seems to be just scaling that has this issue. And I experience the same problem in both Firefox and Chrome.

Here is an example of my problem on jsFiddle. As you can see, rotation and translation work fine, but scaling doesn’t.

Any ideas what’s going wrong?

Answer 1

Somehow applying the transform changes the stroke-width to NaN. Perhaps it’s a bug. You can apply the transform using a matrix transform though.