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>