CODEWITHSUNDEEP
htmlcsssvg
Ben
Ben

Reputation: 3674

HTML SVG Stroke wider at edges

I have created this scalable vector graphic.

<svg width="150" height="90" style="stroke: black;">
    <rect width="40" height="90" style="fill:white;"></rect>
    <polygon points="40,0 40,90 150,90 100,45 150,0" style="fill:blue;"/>
</svg>

I am aiming for the left hand side but the result returns the right hand side.

iamge

As you can see the vertical edges have wider strokes than the horizontal. Is this a defect of svg? Is there a way a can mitigate it to achieve a more consistent stroke.

Upvotes: 2

Views: 579

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

The edges of your shape consincide with the ouside boundary of your SVG. Strokes are drawn so that half their width is on either side of the line.

So whats happening is that half of the top, left and bottom lines are cut off because they are outside of the SVG.

Some solutions would be:

  1. Move your lines inside the SVG by half the stroke width.
  2. Add a viewBox that is half the stroke width bigger than your shape. This will have the effect of scaling down your shape so that all the stroke is drawn.
  3. Add overflow="visible" to your SVG so that that the parts of your shape that are outside the SVG are drawn, and not clipped (as suggested by @enxaneta)

Upvotes: 4

Related Questions