Geek Answers Handbook

Raphael Rectangle

When I draw a simple rectangle using the following code, the bottom and right edges of the edges are thicker than the top and left edges. Why can this and I stop him?

var paper = Raphael(10, 50, 500, 500); var rect = paper.rect(100, 100, 100, 100);
+4
source share
2 answers

The top and left borders of the rectangle, which use a default stroke width of 1 pixel, fall exactly to the top and left borders of your SVG element (as represented by the Raphael paper object. Unlike pixel bases, drawing solutions mean that the line essentially borders the element border , which results in cropping 0.5 pixels of your border stroke.

To solve, you just need to move the drawing or shift the initial coordinate offset of the SVG element.

Here is a script showing one solution .

+6
source

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

Can you have some rogue css that changes the course of rect? Try right-clicking on the square and inspecting the rectangle in Firebug or using the Chrome inspector to see if there is any style that has been added.

0
source

More articles:


All Articles