如何通過在 svg 中保存開始時間來重新啟動 animation

Question

我正在嘗試實現三行一個接一個填充並在等待重新啟動時凍結的情況，第一行從0s開始，第二行從3s開始，最后一行在6s，整個過程需要9秒然后重新啟動

 <svg viewBox="0 0 74 2" height="2" width="74"> <line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" /> <line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" /> <line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" /> <line class="line" x1="0" y1="0" x2="0" y2="0" style="stroke:red;stroke-width:4" > <animate id="first" dur="3s" attributeName="x2" from="0" begin="0s" to="20" dur="3s" fill='freeze' /> </line> <line x1="27" y1="0" x2="27" y2="0" style="stroke:red;stroke-width:4" > <animate id="second" dur="3s" begin="3s" attributeName="x2" from="27" to="47" dur="3s" fill='freeze' repeatCount="1" /> </line> <line x1="54" y1="0" x2="54" y2="0" style="stroke:red;stroke-width:4" > <animate id="third" dur="3s" begin="6s" attributeName="x2" from="54" to="74" dur="3s" repeatCount="1" fill='freeze' /> </line> Sorry, your browser does not support inline SVG. </svg>

我的問題是如何同時重新啟動三個 animation 標簽，同時節省它們的開始時間。

ps 我想把它嵌入到一個反應組件中

Answer 1

最簡單的方法是使所有動畫的長度相同，以便它們同時重新啟動。 然后調整每個 animation 中的更改，以便它們在正確的時間發生。

為此，我將動畫從 from/to 轉換為值，因此我可以每 3 秒間隔指定一個值。

 <svg viewBox="0 0 74 2" height="2" width="74"> <line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" /> <line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" /> <line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" /> <line class="line" x1="0" y1="0" x2="0" y2="0" style="stroke:red;stroke-width:4" > <animate id="first" dur="9s" attributeName="x2" begin="0s" values="0;20;20;20" from="0" to="20" repeatCount="indefinite" /> </line> <line x1="27" y1="0" x2="27" y2="0" style="stroke:red;stroke-width:4" > <animate id="second" dur="9s" begin="0s" attributeName="x2" values="27;27;47;47" fill='freeze' repeatCount="indefinite" /> </line> <line x1="54" y1="0" x2="54" y2="0" style="stroke:red;stroke-width:4" > <animate id="third" dur="9s" begin="0s" attributeName="x2" values="54;54;54;74" repeatCount="indefinite" /> </line> Sorry, your browser does not support inline SVG. </svg>