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秒开始。因此，它以这种方式在两个图像之间切换。

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

1 个答案: