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

Question

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?

For the time being, I have determined that a viable workaround for me would be to do the animation, and then remove the `stroke-dasharray` style once it's complete, however, I am still curious if there is a way to avoid such a workaround. — Blake Mann, Oct 19 '17 at 17:58

score 1 · Accepted Answer · answered Oct 19 '17 at 19:35

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>

Thanks! Your second solution seems to be what I'm going to need to do, despite how annoying it's going to be to change all the shapes that are in my file! — Blake Mann, Oct 19 '17 at 20:18

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

1 Answers1