Question

我在下面的示例中有两个关于SVG路径的问题。

我如何一个接一个地为这些路径设置动画？
我可以将其合并为一条路径吗？

样品：

<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的begin属性设置为另一个动画元素的ID + .end，以便在另一个动画结束时开始它？ e.g。

<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>

编辑：

好吧我想我现在看到了你想要的东西。我不认为使用具有多个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>

SVG路径：动画和合并

3 个答案: