Line width in raphaeljs

Question

Is it real to make line with 1px weight in SVG or raphaeljs?

The follow code

 var p = Paper.path("M1 1 L50 1");
 p.attr("stroke", "#D7D7D7");
 p.attr("stroke-width", "1");
 p.attr("opacity", 0.5);

draw line which looks like 2px or 3px. Any alternative?

Answer 1

When SVG lines lie at their apparently correct coordinates they actually lie inbetween pixels, so when you state M1 1 L50 1 it paints half a pixel on the top and the other half in the bottom of the pixel, making it look like a thick, semitransparent line.

To solve this problem you need to either paint at half pixels, or translate your elements half a pixel, ie. element.translate(0.5, 0.5)

You can see the blurry and sharp lines here: http://jsfiddle.net/k8AKy/