how to order an svg visibility animation to toggle do one image after another -
i want make images included in svg file toggle on , off in order. need know how set begin , dur attributes on animate element.
assuming have images following
<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>
how them toggle visibility in order, first image visible @ first 4 seconds, turns invisible next image visible 4 seconds, turns invisible , previous image visible next 4 seconds.
i prefer declarative animation style.
ok figured out how example in book 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>
just in case else has same problem,img1ani begins after 1 second or 1 second after image2ani ends while img2ani begins 1 second after img1ani ends. in way toggles between 2 images.
Comments
Post a Comment