1

在下面的示例中，我有两个关于 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>
4

3 回答 3

2

您可以将动画的开始属性设置为另一个动画元素的ID + .end 以在另一个动画结束时开始它？例如

<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 点的意思。也许您应该问另一个问题并更清楚地说明合并到一条路径的意思？

于 2013-05-14T09:55:18.490 回答
1

您可以通过连接属性的值将两条路径合并为一条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，否则在一个动画开始和另一个动画结束之间会有很大的停顿（或者更确切地说，没有，但看起来有，因为即使破折号它仍在继续增加破折号的长度已经填满了这条线）。

于 2013-05-14T10:39:56.530 回答
0

谢谢您的帮助 ！

这实际上是我正在寻找的结果：

<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>
于 2013-05-14T16:15:35.880 回答