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>