Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blurring borders in SVG (Raphael.js)

I'm working on a web based editor where one can drag and resize elements. I've faces a problem regarding displaying 1px borders and elements: instead of pixel-to-pixel displaying (e.g. 1px solid line) I got a blurring line.

I've found that if I use coords with .5 at the end (e.g. 10.5, 124.5) and integer sizes, everything is pixel perfect.

Here is the examples. The element before I've changed its coords: http://cl.ly/2k1Y3b1M0V1V3h321Y2C

And after (with ".5" at the end of each and integer size): http://cl.ly/39422q3P453u1o3R2j3W

The question is how can I force Raphael.js to display everything in sharp?

like image 488
Grin Avatar asked Aug 13 '11 16:08

Grin


1 Answers

I'm not sure how to do this in Raphael, but a tiny bit of CSS could help you:

.your_lines {
     shape-rendering: crispEdges;
}

Basically it turns off antialiasing for the lines, and the lines that are not horizontal or vertical may not look very pretty.

But probably you'd better stick to adding .5 to the lines' coordinates, because browsers do what they are told to: the line is on exact coordinates and the stroke is painted on both sides of the line, half pixel here and half pixel there.

like image 88
Spadar Shut Avatar answered Sep 26 '22 15:09

Spadar Shut