CODEWITHSUNDEEP
htmlcsssvggeometry
Samuel Anyanwu
Samuel Anyanwu

Reputation: 315

How do I create an SVG polygon with uniform stroke width?

I am trying to create an SVG polygon with a border round the element (or in this case a stroke). This works for the most part however the clipped edges of the polygon appear to have a thicker stroke than the other sides. Is there a way to ensure that the stroke width is uniform round the shape.

Here's an image illustrating the problem enter image description here

The top left and bottom right edge have a visibly thicker stroke than the other sides or edges.

The code is basically this

<svg viewbox="0 0 100 100" height="500" width="500">
  <polygon points="10, 0, 100, 0, 100, 90, 90, 100, 0, 100, 0, 10" style="fill:lime;stroke:purple;stroke-width:4" />
</svg>

Upvotes: 3

Views: 4361

Answers (2)

Chris Schreiner
Chris Schreiner

Reputation: 854

I believe vector-effect="non-scaling-stroke" would solve this for you, like:

<svg viewbox="0 0 100 100" height="500" width="500">
  <polygon vector-effect="non-scaling-stroke" 
           points="10, 0, 100, 0, 100, 90, 90, 100, 0, 100, 0, 10" style="fill:lime;stroke:purple;stroke-width:4" />
</svg>

Upvotes: 1

Dai
Dai

Reputation: 155175

The stroke really is 4 units wide, but it's being clipped by the viewbox. Remember that strokes are centred along their path rather than aligned to one side...

...so if you have a viewbox of 0 0 100 100 and you have a line or path running from (0,0) to (0,100) and you give it a stroke of 7px, then only 3.5px of that stroke's width will be visible because the other half will exist between x = -3.5px and x = 0.

If you increase the size of the viewbox and/or move the polygon so its points are at least 4 "units" away from the side of the viewbox then the full path becomes visible:

(It's 4 "units" and not 4px because unitless widths (like stroke-width: 4;) in SVG are assumed to be in units of the viewbox w.r.t. the current set of transformations, if relevant - so you might want to add an explicit unit to the stroke-width property for consistent rendering.

<svg viewbox="-5 -5 110 110" height="500" width="500">
  <polygon points="10, 0, 100, 0, 100, 90, 90, 100, 0, 100, 0, 10" style="fill:lime;stroke:purple;stroke-width:4" />
</svg>

Upvotes: 6

Related Questions