1

I create a star via an SVG polygon. It draws fine when the stroke width is 1, but with wider strokes, the bottom left (and only the bottom left) vertex gets cut off. Does anyone know why this happens (and how to fix it)?

The following snippets (which I displayed using https://www.w3schools.com 'try it') show the problem, both with the original star and with just the bottom 'arm' isolated as a simple triangle:

<svg height="200" width="200">
  <polygon points="16,53 23,35 8,25 25,25 30,8 36,25 53,25 38,35 45,53 30,41" style="fill:none;stroke:purple;stroke-width:7" />
  Sorry, your browser does not support inline SVG.
</svg>

<svg height="300" width="300">
  <polygon points="120,164 64,212 92,140" style="fill:none;stroke:purple;stroke-width:9" />
  Sorry, your browser does not support inline SVG.
</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
FrankK
  • 41
  • 4

1 Answers1

2

The default stroke-miterlimit is 4. You need a larger number than that because your star is quite pointy.

<svg height="200" width="200">
  <polygon transform="translate(10, 10)" points="16,53 23,35 8,25 25,25 30,8 36,25 53,25 38,35 45,53 30,41" style="fill:none;stroke:purple;stroke-width:7; stroke-miterlimit:10" />
  Sorry, your browser does not support inline SVG.
</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242