HTML SVG線動畫

Question

如何從開始到結束路徑製作點線（例如3形狀，點線從上到下繪製）？

.box { 
 
    overflow: hidden; 
 
    outline: none; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
.mask { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
    z-index: 10; 
 
    background-color: white; 
 
    background-repeat: no-repeat; 
 
    animation: showDiag 2s linear forwards; 
 
} 
 

 
@keyframes showDiag { 
 
    from { 
 
    left: 0; 
 
    top: 0; 
 
    } 
 
    to { 
 
    left: 200px; 
 
    top: 200px; 
 
    } 
 
}

<div class="box"> 
 
    <svg class height="200" width="200"> 
 
    <line fill="none" stroke="black" x1="0" y1="0" x2="200" y2="200" stroke-dasharray="5, 5" /> 
 
    </svg> 
 
    <div class="mask"></div> 
 
</div>

我不知道如何從頂部做淡出底部。

Answer 1

具有堅實的（非虛線）線條非常簡單。這裏是一個很好的教程：

Animated line drawing in SVG

Answer 2

我敢打賭，大家已經看到，小動作，其中一個SVG路徑是 動畫看起來像它的繪製本身。這是超級酷。 Jake Archibald開創了這項技術，並且在它的工作方式上有一個超級好的互動 博客文章。布賴恩蘇達在24種方式中寫道。 多邊形使用它對定製設計的文章有很大的影響，並且寫了 。 Codrops有一些簡潔的例子。

我幾乎沒有補充，除了我的大腦只是有點想出來， 所以我想我會再次解釋它的方式，它點擊了 我。

這裏是我讀，看起來有用的東西 -https://css-tricks.com/svg-line-animation-works/