動畫多個svg路徑

Question

我想了解動畫SVG路徑的具體細節，並且有一個問題令我感到困惑。

This great example by Max Codepen是我正在努力完成的。對單個路徑設置動畫效果對我來說是有意義的，但是對於多個不同長度的路徑（如示例中所示）。

每個筆劃長度是不同的是？

那麼，爲什麼，例如，做一個中風dasharray的的ID內：結構工作？

&#structure { 
     stroke: #999; 
     stroke-dasharray: 680; 
     stroke-dashoffset: 680; 
     animation-duration: 3s; 
     animation-delay: 2s; 
    } 

不該有的這些路徑的不完全呈現，如果他們比680短？所有這些路徑的長度是680？他們看起來不一樣長。我錯過了什麼/沒有理解。

感謝ç

Answer 1

它的工作原理，因爲所有路徑都長超過680如果他們超過680虛線樣式不會到達路徑的全長的固體部分。

「680」的短劃線是680 680的快捷方式。其中描述了680固體破折號的模式，然後重複680次。

路徑始於680的短劃線偏移，這意味着它們首先在短劃線模式的680間隙內呈現。然後在動畫中，虛線偏移緩慢減少到0.模擬線條的繪製。

如果一條線比680短，那麼會發生的情況是，在短劃線的實體部分變得可見之前，在動畫中會出現一些間隙的動畫。這個效果就是線越短，看起來越晚開始繪製。你可以看到這發生在XBox圖像內部的線條上。