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.启动多边形的一个像素到第一侧。这样一来，终点在开始/结束角落的周围就会变得如此轻微。

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>