How to apply (or maintain) line style in Raphael after scaling?

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?

Answers


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.


Need Your Help

Lanczos Resampling error

image-resizing resampling lanczos

I have written an image resizer using Lanczos re-sampling. I've taken the implementation straight from the directions on wikipedia. The results look good visually, but for some reason it does not m...

TFS 2008 very slow - what to do about it?

visual-studio-2008 tfs tfs2008

We have a small TFS setup (only 3 -4 developers use it), but it has been in use since 2008 and is lately getting excruciatingly slow to respond, for checkout, work item reports, you name it. VS2008