多边形上的 SVG stroke-dasharray 导致起始角出现断开连接

Question

我有一个 SVG 多边形，我正在尝试为其设置笔划动画，但是我遇到了一个问题，即一旦我开始使用 stroke-dasharray，我就无法让所有四个角看起来都连接在一起。

这是一个例子：

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>

我如何处理破折号数组或偏移量似乎并不重要，顶角总是断开连接。

这只是处理 SVG 的一个陷阱，还是有什么可以解决的？

Answer 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。将多边形从一个像素开始到第一边。这样终点就会稍微绕 start/end 角。

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>

多边形上的 SVG stroke-dasharray 导致起始角出现断开连接

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

svg

stroke-dasharray