svg - 如何订购 svg 可见性动画以切换一个接一个的图像

Question

我想按顺序打开和关闭包含在 svg 文件中的一些图像。为此，我需要知道如何在 animate 元素上设置 begin 和 dur 属性。

假设我有如下图像

<image visibility="visible" xlink:href="image1.gif" x="0" y="0" height="100%" width="100%">
   <animate attributeName="visibility" begin="0s"
 from="visible" to="hidden" dur="5s" repeatCount="indefinite" />
</image>
<image visibility="hidden" xlink:href="image2.gif" x="0" y="0" height="100%" width="100%">
   <animate attributeName="visibility" begin="5s"
 from="hidden" to="visible" dur="4s" repeatCount="indefinite" />
</image>

我如何让他们按顺序切换它们的可见性，以便第一个图像最初可见 4 秒，它变为不可见，下一个图像可见正好 4 秒，它变为不可见，而前一个图像现在可见接下来的 4 秒。

我真的更喜欢用声明式动画风格来做到这一点。

Answer 1

好的，我从 SVG Unleashed http://my.safaribooksonline.com/book/photo-and-graphic-manipulation/0672324296 一书中的一个例子中找出了如何做到这一点。

<image visibility="visible" xlink:href="image1.gif" x="0" y="0" height="100%" width="100%">
    <animate id="img1ani" attributeName="visibility" begin="1s; img2ani.end+1s"
 from="visible" to="hidden" dur="5s" fill="freeze" />
 </image>
 <image id="img2" visibility="hidden" xlink:href="image2.gif" x="0" y="0" height="100%" width="100%">
    <animate id="img2ani" attributeName="visibility" begin="img1ani.end+1s"
 from="hidden" to="visible" dur="5s"/>
</image>

以防万一其他人有同样的问题，img1ani 在 image2ani 结束后 1 秒或 1 秒后开始，而 img2ani 在 img1ani 结束后 1 秒后开始。
因此，它以这种方式在两个图像之间切换。