svg rectangle border not drawing properly

Question

Just getting started using svg's.

I am trying to draw a simple rectangle with a border, but it seems like the border is somehow giving me a shadow-like effect. It seems to draw the right and bottom border much thicker than the top and left border. Very weird.

This happens when I do rounded edges and when with normal sharp edges.

Here is the code:

<svg>
    <rect width="30" height="30" rx="5"
        style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

I've included a PLNKR: http://plnkr.co/edit/HGBTNyjasqzwtguOIbnV

Answer 1

Your rectangle is being clipped by the edge of the <svg>. The stroke width makes the rect wider but doesn't automatically adjust its position. Add x="1" and y="1" to your <rect>

<rect x="1" y="1" width="30" height="30" rx="5"
        style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>