動畫筆畫dashoffset無法關閉形狀

我正在使用虛線偏移動畫技術製作一個簡單的微調框。你可以看到我有什麼here。正如你所看到的，多邊形的形狀從不關閉。是否有任何簡單的方法可以確保路徑完成形狀，而不是將頂部的斜角切掉。動畫筆畫dashoffset無法關閉形狀

我可以在拍攝的路徑詮釋他的SVG，使其重疊來完成這最後一個彎道。不幸的是，你可以看到它在不理想的動畫中透支。

HTML

<div class="logo-container"> 
    <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632"> 
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/> 
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/> 
    </svg> 
</div>

CSS

.logo-container { 
    width: 400px; 
    .is2-logo path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    } 
    .blue-path { 
    animation: dash 2s linear forwards infinite; 
    } 
    .gray-path { 
    animation: dash 2s linear forwards infinite .5s; 
    } 
} 

@keyframes dash { 
    0% { 
    stroke-dashoffset: 1000; 
    } 
    50% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: -1000; 
    } 
}

來源

2016-04-12 Lee Williams

創建其他兩個路徑是除了一段短暫的時間段之外，當你想要關閉路徑時，它們是不可見的。 –

這是我的後備計劃，但它增加了複雜性，並重復了一些努力。它也會導致問題，例如，如果我希望這放在圖像或彩色背景上。我希望可能有更優雅的解決方案。 –

完成的形狀，而不是在頂部離開斜切角落。

其實它是在頂部留下對接線帽。

爲什麼不讓藍色的路線像灰色的那樣有圓形的帽子？

.logo-container { 
 
    width: 400px; 
 
} 
 
.logo-container .is2-logo path { 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
} 
 
.logo-container .blue-path { 
 
    animation: dash 5s linear forwards infinite; 
 
} 
 
.logo-container .gray-path { 
 
    animation: dash 5s linear forwards infinite .5s; 
 
} 
 

 
@keyframes dash { 
 
    0% { 
 
    stroke-dashoffset: 1000; 
 
    } 
 
    50% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: -1000; 
 
    } 
 
}

<div class="logo-container"> 
 
    <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632"> 
 
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linecap="round" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/> 
 
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/> 
 
    </svg> 
 
</div>

來源

2016-04-12 18:52:56

不幸的是，客戶標識不是圓形的，我假設他們會拒絕這個解決方案。儘管這是最優雅的。我正在調查使用標記開始/結束。 –

他們徽標的哪個角落沒有圓角？只是藍鑽石的頂角？ –

沒有一個角落應該是圓形的，應該看起來像堆積的鑽石。道歉，如果我的筆圓角導致這種混亂，我正在自己周圍，並可能保存在意外。 –

你爲什麼不只是另一條腿延伸的路徑，留下幾許偏離相同：

<svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632"> 
 
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3 l106.08 -61.04 106.08 61.04" marker-end="url(#gray-start)"/> 
 
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225 l106.08 61.04 -106.08 61.032 L15.724 70.265 l106.08 -61.04 106.08 61.04"/> 
 
    </svg>

來源

2016-04-13 00:14:10

動畫筆畫dashoffset無法關閉形狀

回答

相關問題