SVG stroke-dasharray on a polygon causes the starting corner to appear disconnected

I have an SVG polygon that I am attempting to animate the stroke for, however I have an issue where I can't get all four corners to appear to be joined together once I start using stroke-dasharray.

Here is an example:

svg {
  overflow: visible;
  width: 300px;
}

polygon {
  fill: none;
  stroke: #E1B87F;
  stroke-width: 6px;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
    <polygon points="100,0 0,100 100,200 200,100" style="stroke-dasharray: 565.685px; stroke-dashoffset: 0px;" />
</svg>

It doesn't really seem to matter how I handle the dash array or the offset, the top corner is always disconnected.

Is this just a pitfall of dealing with SVG, or is there something that can be done to fix it?

Solution

This happens when the polygon or path starts at a corner.

There are a couple of things you can do.

1. Give the line square end caps

stroke-linecap: square;

svg {
  overflow: visible;
  width: 300px;
}

polygon {
  fill: none;
  stroke: #E1B87F;
  stroke-width: 6px;
  stroke-linecap: square;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
    <polygon points="100,0, 0,100 100,200 200,100" style="stroke-dasharray: 565.685px; stroke-dashoffset: 0px;" />
</svg>

2. Start the polygon one pixel into the first side. That way the end point wraps ever so slightly round the start/end corner.

points="99,1, 0,100 100,200 200,100, 100,0"

svg {
  overflow: visible;
  width: 300px;
}

polygon {
  fill: none;
  stroke: #E1B87F;
  stroke-width: 6px;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
    <polygon points="99,1, 0,100 100,200 200,100, 100,0" style="stroke-dasharray: 565.685px; stroke-dashoffset: 0px;" />
</svg>