0

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?

4

1 回答 1

1

当多边形或路径从拐角处开始时会发生这种情况。

您可以做几件事。

1.给线方形端盖

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. 将多边形从一个像素开始插入第一边。这样，终点就在起点/终点角处略微包裹。

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>

于 2017-10-19T19:35:09.370 回答