CODEWITHSUNDEEP
javascriptraphael
benshort
benshort

Reputation: 660

Raphael Rectangle Border

When I draw a simple rectangle using the following code the bottom and right edge borders are thicker that the top and left edge borders. Why is this and can I stop it?

var paper = Raphael(10, 50, 500, 500);
var rect = paper.rect(100, 100, 100, 100);

Upvotes: 4

Views: 3274

Answers (2)

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

Your rectangle's top and left borders, which are using the default 1 pixel stroke-width, are falling exactly on the top and left borders of your SVG element (as represented by a Raphael paper object. As opposed to pixel based drawing solutions, this means the line is essentially straddling the element's border, resulting in 0.5 pixels of your border stroke being clipped.

To solve, you simply need to shift your drawing over or shift the beginning offset of your SVG element's coordinates.

Here's a fiddle that shows one solution.

Upvotes: 6

disperse
disperse

Reputation: 1296

The square looks fine to me: http://jsfiddle.net/cMXBC/2/

Could you have some rogue css somewhere that is modifying the stroke of the rect? Try right-clicking the square and inspecting the rectangle in Firebug or with the Chrome inspector to see if there is any style that has been added.

Upvotes: 0

Related Questions