SVG路徑：動畫和合並

Question

我在下面的例子中有兩個關於SVG路徑的問題。

1. 我該如何使路徑一個接一個地動起來？
2. 我可以將它合併到一個路徑嗎？

樣品：

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full"> 
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" /> 
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2"> 
<animate attributeName="stroke-dasharray" values="0,100;100,100" begin="0s" dur="5s" /></path> 
</svg> 

Answer 1

可以設置開始一個animtation的屬性到另一個動畫元素+ .END的ID，開始它的另一動畫結束時？例如

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full"> 
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" /> 
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2"> 
<animate id="one" attributeName="stroke-dasharray" values="0,100;100,100" begin="0s" dur="2s" fill="freeze"/> 
<animate attributeName="stroke" values="red" begin="one.end" dur="2s" /> 
</path> 
</svg> 

不知道你的意思2點什麼也許你應該問另外一個問題，可以很清楚的是你的意思是合併成一個路徑？

Answer 2

您可以通過連接d屬性值的兩路合併爲一個：

<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2" /> 

因爲它有兩個M元素，它將開始動畫的兩倍。如果要合併到到一個單一的連續路徑，嘗試：

<path d="M11.25 59.5C32.55 46.62 44.69 28.76 50.45 19.62C51.73 17.59 52.5 16.28 54.5 19.25 
     C61.23 26.55 78.59 44.06 87.45 51.16C90.18 53.34 93.06 54.96 96.5 55.75" style="fill:none;stroke:black;stroke-width:2"> 
<animate attributeName="stroke-dasharray" values="0,200;200,200" begin="0s" dur="5s" /></path> 

編輯：

OK，我想我看你現在想要什麼。我不認爲它會使用具有多個M命令的單個路徑，因爲它們會導致新的破折號陣列啓動，並且會影響您的動畫。你可以嘗試使用單個加入的路徑，然後在你不想要的位上畫白盒子，但這並不理想。

這種獲取我覺得效果你是後：這是

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"> 

    <path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2"> 
    <animate id="animate1" attributeName="stroke-dasharray" from="0,60" to="60,60" begin="0s" dur="5s"/></path> 

    <path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:0,80"> 
    <animate attributeName="stroke-dasharray" from="0,80" to="80,80" begin="animate1.end" dur="5s" fill="freeze"/></path> 

</svg> 

也因爲你需要改變取決於線路的長度虛線數組的長度並不理想。我把它縮小到了60，否則當一個動畫開始時和另一個動畫開始時會有一個很大的停頓（或者說，沒有，但它看起來像是因爲它繼續增加破折號的長度，即使短劃線已經填補了這條線）。

Answer 3

謝謝你的幫助！

其實，這是我一直在尋找的結果：

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full"> 
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" > 
<animate attributeName="stroke-dasharray" values="0,200;200,200" begin="0s" dur="3s" onend="document.querySelectorAll('path')[1].style.display='block'"/> 
</path> 
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2;display:none" > 
<animate attributeName="stroke-dasharray" values="0,200;200,200" begin="3s" dur="3s" /> 
</path> 
</svg>