CODEWITHSUNDEEP
htmlcsssvg
Tom O'Brien
Tom O'Brien

Reputation: 1831

svg rectangle border not drawing properly

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

Upvotes: 6

Views: 3634

Answers (2)

Matthew Dunbar
Matthew Dunbar

Reputation: 426

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>

<svg>
    <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)"/>
</svg>

Upvotes: 8

luissevillano
luissevillano

Reputation: 122

@Matthew is right. Another solution could be modify SVG's default value for the property overflow: hidden to overflow:visible.

Upvotes: 1

Related Questions